如何将React项目中Redux Toolkit编写的购物车reducer转换为原生Redux代码

以下是和你给出的RTK代码功能完全等价的原生Redux实现，直接替换原文件内容即可：

// 1. 定义Action类型常量
const ADD_PRODUCT = 'cart/addProduct';

// 2. 定义初始State，和RTK版本保持一致
const initialState = {
  products: [],
  quantity: 0,
  total: 0,
};

// 3. 编写Action Creator，对应RTK自动生成的addProduct方法
export const addProduct = (productPayload) => {
  return {
    type: ADD_PRODUCT,
    payload: productPayload
  };
};

// 4. 编写原生Redux Reducer
export default function cartReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_PRODUCT:
      // 原生Redux必须返回全新的state对象，禁止直接修改原state
      return {
        ...state,
        quantity: state.quantity + 1,
        products: [...state.products, action.payload],
        total: state.total + action.payload.price * action.payload.quantity
      };
    default:
      return state;
  }
}

注意说明 #

• 你在组件中触发添加购物车的代码不需要修改，dispatch(addProduct(商品数据))的用法和RTK版本完全一致
• 原生Redux要求Reducer是纯函数，不允许直接修改传入的state参数，所有状态更新都要返回全新的状态对象，数组更新需要通过展开运算符/concat等方式返回新数组。RTK中可以直接修改state的写法是内部集成了Immer库做了转换，原生Redux需要自己实现不可变更新。
• 原生Redux需要手动定义Action类型常量、手动编写Action Creator，这部分逻辑在RTK中是createSlice自动生成的。

内容的提问来源于stack exchange，提问作者TheRealJohnDoe