React-Redux中通过Reducer向嵌套对象数组添加元素

嘿，刚接触React-Redux没几天就遇到这个问题很正常，别着急，我来一步步帮你搞定～

首先得记住Redux的核心规则：reducer是纯函数，绝对不能直接修改原state，必须返回一个全新的状态对象。这是因为Redux依赖状态的引用变化来触发组件更新，直接修改原数据的话，Redux检测不到变化，组件就不会重新渲染。

步骤1：创建对应的Action创建函数 #

首先你需要一个能触发添加产品动作的函数，用来传递要添加的产品数据：

// 比如在src/actions/cartActions.js文件中
import { ADD_PRODUCT } from "../constants/action-types";

export const addProduct = (product) => {
  return {
    type: ADD_PRODUCT,
    payload: product // payload就是你要添加的产品对象，比如{name: "product c"}
  };
};

步骤2：完善你的Root Reducer #

接下来要在reducer里处理ADD_PRODUCT这个动作，因为你的state是深层嵌套的（order.cart.items），所以需要逐层复制对象和数组，保证不可变性：

import ApplicationState from '../application-state';
import { ADD_PRODUCT } from "../constants/action-types";

const initialState = ApplicationState;

const rootReducer = (state = initialState, action) => {
  switch(action.type) {
    case ADD_PRODUCT:
      // 逐层复制，避免修改原state
      return {
        ...state, // 复制整个根state
        order: {
          ...state.order, // 复制order对象
          cart: {
            ...state.order.cart, // 复制cart对象
            // 把新产品添加到items数组的末尾，返回新数组
            items: [...state.order.cart.items, action.payload]
          }
        }
      };
    // 其他case可以在这里添加
    default:
      return state; // 默认情况返回原state
  }
};

export default rootReducer;

步骤3：在组件中触发这个Action #

最后，你可以在React组件里通过useDispatch钩子来分发这个action，比如：

import { useDispatch } from 'react-redux';
import { addProduct } from '../actions/cartActions';

function AddProductButton() {
  const dispatch = useDispatch();

  const handleAdd = () => {
    // 构造你要添加的产品数据
    const newProduct = { name: "product c" };
    // 分发action，触发reducer更新state
    dispatch(addProduct(newProduct));
  };

  return (
    <button onClick={handleAdd}>
      添加产品到购物车
    </button>
  );
}

export default AddProductButton;

新手注意点 #

• 不要直接修改原数组：比如绝对不能用state.order.cart.items.push(action.payload)，这会直接修改原state，Redux检测不到变化
• 确保你的Store已经正确配置：要把这个rootReducer传入createStore（或者configureStore，如果你用的是Redux Toolkit），并且用Provider把根组件包裹起来，让所有子组件能访问到store
• 如果嵌套层级太深，后续可以考虑用Redux Toolkit的createSlice，它会自动处理不可变性，写起来更简洁

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