如何在反应中转换 Redux 工具包减速器

Question

我已经开始使用 React 学习 Redux，我陷入了我项目的一部分，这是一个电子商务商店，当用户点击添加到购物车时，我想更新数量并将文章添加到包。我已经为其他功能实现了 Redux，但我找到了解决我尚未学习的 ReduxToolkit 问题的解决方案

如何将这段使用 redux 工具包编写的代码转换为 Redux？

import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    products: [],
    quantity: 0,
    total: 0,
  },
  reducers: {
    addProduct: (state, action) => {
      state.quantity += 1;
      state.products.push(action.payload);
      state.total += action.payload.price * action.payload.quantity;
    },
  },
});

export const { addProduct } = cartSlice.actions;
export default cartSlice.reducer; 

Answer 1

我相信您当前的商店是这样创建的：

const rootReducer=combineReducers({
          firstFunctionality:firstFunctionalityReducer,
          secondFunctionality:secondFunctionalityReducer,
          ... })

现在您想创建一个新功能，例如购物车，

首先你创建初始状态：

const initialState={
    products: [],
    quantity: 0,
    total: 0,
  }

现在是减速器：

const cartReducer=(state=initialState,action)=>{

         switch (action.type) {
             case "addProduct":return {...state,
                                      quantity:state.quantity+1,
                                      products:[...state.products,action.payload],                                 
                                      total:action.payload.price*action.payload.quantity;
             
             case "default":return state}
             }

现在我们使用这个新的 reducer：

const rootReducer=combineReducers({
          firstFunctionality:firstFunctionalityReducer,
          secondFunctionality:secondFunctionalityReducer,
          cartFunctionality:cartReducer
          ... })
                             

现在，当您需要添加产品时，您可以发送此操作：

const addProductAction=(product)=>({type:"addProduct",payload:product})

最后一件事是你如何分派动作和使用状态。这可以通过 useSelector 和 useDispatch hooks 或 mapDispatchToProps 和 mapStateToProps 和 connect HOC 来实现。