当前位置：首页 > 文章列表 > 文章 > 前端 > 将 Redux Toolkit 与 React 结合使用：简单指南

将 Redux Toolkit 与 React 结合使用：简单指南

来源：dev.to 2024-08-05 18:18:46 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

本篇文章给大家分享《将 Redux Toolkit 与 React 结合使用：简单指南》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

redux toolkit 是官方推荐的编写 redux 逻辑的方法。它为开箱即用的商店设置提供了良好的默认设置，并包含最常用的内置 redux 插件。在本博客中，我们将介绍将 redux toolkit 与 react 应用程序集成的基础知识。

什么是 redux 工具包？

redux toolkit 是一组有助于简化编写 redux 逻辑过程的工具。它包括用于简化常见用例的实用程序，例如存储设置、创建减速器和编写不可变的更新逻辑。

使用 react 设置 redux 工具包

让我们完成在 react 应用程序中设置 redux toolkit 的步骤。

第 1 步：安装依赖项

首先，您需要安装必要的软件包。您可以使用 npm 或yarn 来完成此操作。

npm install @reduxjs/toolkit react-redux

第 2 步：创建 redux store

store 是赋予 redux 生命的对象。借助 redux toolkit，您可以使用 configurestore 函数创建商店。

// src/store.js
import { configurestore } from '@reduxjs/toolkit';
import counterreducer from './features/counter/counterslice';

const store = configurestore({
  reducer: {
    counter: counterreducer,
  },
});

export default store;

第 3 步：创建切片

切片是应用程序单个功能的 redux 减速器逻辑和操作的集合。 redux toolkit 的 createslice 函数会自动生成动作创建者和动作类型。

// src/features/counter/counterslice.js
import { createslice } from '@reduxjs/toolkit';

const counterslice = createslice({
  name: 'counter',
  initialstate: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterslice.actions;

export default counterslice.reducer;

第 4 步：为您的 react 应用程序提供 store

要使 redux 存储可供您的 react 组件使用，您需要使用 react-redux 中的 provider 组件。

// src/index.js
import react from 'react';
import reactdom from 'react-dom';
import { provider } from 'react-redux';
import app from './app';
import store from './store';

reactdom.render(
  <provider store={store}>
    <app />
  </provider>,
  document.getelementbyid('root')
);

第 5 步：将 react 组件连接到 redux store

要将 react 组件连接到 redux 存储，您可以使用react-redux 中的 useselector 和 usedispatch 钩子。

// src/components/counter.jsx
import { useselector, usedispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterslice';

function counter() {
  const count = useselector((state) => state.counter.value);
  const dispatch = usedispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onclick={() => dispatch(increment())}>increment</button>
      <button onclick={() => dispatch(decrement())}>decrement</button>
    </div>
  );
}

export default counter;

第 6 步：在您的应用程序中使用连接的组件

最后，您可以在应用程序中使用连接的组件。

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;