Redux Toolkit 在 ReactJS 中编写 Redux 代码的更好方法

Redux Toolkit用于编写 redux 代码，但方式更简洁。 Redux Toolkit (RTK) 解决了大多数在 react 应用程序中使用 redux 的开发人员面临的三个更大的问题。

1. 配置商店的代码太多。
2. 编写太多样板代码来调度操作并将数据存储在减速器中。
3. 用于执行异步操作的额外包，如 Redux-Thunk 和 Redux-Saga。

创建 React 应用程序并安装模块：

• 第 1 步：使用以下支持 typescript 的命令创建一个反应应用程序：

// NPM
npx create-react-app my-app --template typescript

// Yarn
yarn create react-app my-app --template typescript

• 第 2 步：创建项目后，使用以下命令进入项目文件夹：

cd my-app

• 第 3 步：现在使用以下命令在我们创建的项目中通过 npm 或 yarn 安装 Redux Toolkit：

// NPM
npm install @reduxjs/toolkit react-redux

// Yarn
yarn add @reduxjs/toolkit react-redux

项目结构：它看起来像这样。

Store Creation：使用 redux 工具包中的 configureStore 方法创建一个名为 store.js 的文件，传入应用程序初始化 store 所需的 list reducer。

store.js

import { configureStore } from '@reduxjs/toolkit'
  
export const store = configureStore({
    reducer: {},
})

为 React 应用程序提供 Store：一旦创建了 store，我们就可以使用 react-redux 包中的 Provider 方法将 store 提供给 react 应用程序。

应用程序.js

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import { store } from './store.js';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root'),
);

创建 Redux Slice：创建一个 slice.js 文件。在 Redux Toolkit 中，我们使用 redux 工具包中的 createSlice API 创建了一个 reducer。它通过在内部使用它们将 action 的创建和 reducer 的复杂 switch case 简化为几行代码。

切片.js

import { createSlice } from '@reduxjs/toolkit';
  
const initialState = {
  name: [],
  food: [],
};
  
const customerSlice = createSlice({
  
  // An unique name of a slice
  name: 'customer',
  
  // Initial state value of the reducer
  initialState,
  
  // Reducer methods
  reducers: {
    addCustomer: (state, { payload }) => {
      state.name.push(payload);
    },
  
    orderFood: (state, { payload }) => {
      state.food.push(payload);
    },
  },
});
  
// Action creators for each reducer method
export const { addCustomer, orderFood }
            = customerSlice.actions;
              
export default customerSlice.reducer;

尽管上面的代码，我们用来推送它并不会改变状态值，因为 Redux 工具包在内部使用 immer 库来不可变地更新状态。

现在，我们将 reducer 导入到我们之前创建的 store.js 文件中。通过在 reducer 参数中定义一个字段，我们告诉 store 使用这个 slice reducer函数来处理对该状态的所有更新。

store.js

import { configureStore } from '@reduxjs/toolkit';
import reducer from './slice.js';
  
export default configureStore({
  reducer: {
    customers: reducer,
  },
});

在组件中使用 Redux 状态和操作：我们可以使用 react-redux 钩子（useSelectore 和 useDispatch）来读取 redux 存储值并将操作分派到 reducer。

组件.js

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { orderFood } from './slice.js';
  
function CustomerCard({ name }) {
  const [orders, setOrders] = useState('');
  
  // Using useSelector hook we obtain the redux store value
  const food = useSelector((state) => state.customers.food);
  
  const dispatch = useDispatch();
  
  // Using the useDispatch hook to send payload back to redux
  const addOrder = () => dispatch(orderFood(orders));
  
  return (
    

      

        
{name}
  
        

          {food.map((foo) => (
            
{foo}
          ))}
  
          

             
              setOrders(event.target.value)} />
  
            Add
          
        
      
    
  );
}
  
export default CustomerCard;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

// NPM
npm start

// yarn
yarn start

这就是 redux 工具包如何通过避免所有样板代码来简化 redux 的使用。

参考：

• Redux 工具包库： https://redux-toolkit.js.org/
• 项目仓库： https://github.com/vazanth/redux-toolkit