Redux中Action修改状态的方式选型及跨Reducer场景疑问

问题背景 #

你正在开发抽奖类应用，现有Redux状态定义：

type initialCartState = {
    productsFromPreviousSession: Product[]
    selectedProduct: Product
    balance: number,
    productsInCart: Product[]
}

对应的Reducer实现：

const reducers = {
 addProduct(state, action) => {
    state.products.push(state.action.payload.product)
 },
 addProductsFromPreviousSession(state, action) => {
    state.products.push(...state.productsFromPreviousSession)
 },
}

组件调用逻辑：

const component = () => {
   const selectedProduct = useSelector(state => state.cart.selectedProduct);
   const availableBalance = useSelector(state => state.cart.balance - sum(state.cart.products, 'price'));
   const dispatch = useDispatch()
   const sumOfProductsFromPreviousSession = useSelector(state => sum(state.cart.products,'price'))

   return (
       <div> 
           <div onClick={() => {
              if((balance - selectedProduct.price) > 0) {
                 dispatch(cartActions.addProduct(selectedProduct))
              }
           }}/>
           <div onClick={() => {
              if((balance - sumOfProductsFromPreviousSession) > 0) {
                 dispatch(cartActions.addProductsFromPreviousSession())
              }
           }}/>
       </div>
   )
}

核心问题解答 #

1. 两种状态修改方式的正确性 #

首先明确Redux核心原则：Reducer必须是纯函数——不能直接修改原状态，不能依赖外部状态/副作用，相同输入必须返回相同输出。

（1）addProduct的方式（通过payload传参）是正确方向，但现有实现有错误

这个思路符合Redux设计：通过Action的payload传递要修改的数据，Reducer只负责基于输入更新状态。但当前代码存在两处错误：

• 直接调用state.products.push()修改原状态对象，违反Redux不可变性要求，会导致状态变更无法被正确检测。
• 属性名错误：状态定义里是productsInCart而非products；Action参数应为action.payload而非state.action.payload。

正确的原生Redux实现（返回新状态对象）：

addProduct(state, action) {
  return {
    ...state,
    productsInCart: [...state.productsInCart, action.payload]
  }
}

如果使用Redux Toolkit（推荐），可利用Immer实现“可变”写法（底层仍为不可变更新）：

addProduct(state, action) {
  state.productsInCart.push(action.payload);
}

（2）addProductsFromPreviousSession的方式存在缺陷

当前实现让Reducer直接依赖自身的productsFromPreviousSession状态，同时依赖本地存储中间件的store.getState()，不符合纯函数原则：

• Reducer的职责是基于Action输入更新状态，而非主动读取自身已有状态修改。
• 从本地存储恢复会话产品的逻辑，应在Action中携带读取到的产品列表作为payload，Reducer只负责合并数据，而非自行取数。

修正后的实现：

// Action Creator
const addProductsFromPreviousSession = (products: Product[]) => ({
  type: 'cart/addProductsFromPreviousSession',
  payload: products
});

// Reducer
addProductsFromPreviousSession(state, action) {
  return {
    ...state,
    productsInCart: [...state.productsInCart, ...action.payload]
  }
}

本地存储的读取逻辑应放在组件初始化或Thunk异步Action中，读取完成后再dispatch携带payload的Action，而非让Reducer或中间件直接依赖store.getState()。

2. 当balance移到其他Reducer时的处理方案 #

若balance不在cartReducer中，cartReducer无法直接访问该状态，可通过以下方式处理：

（1）在组件中完成验证逻辑

这是最直接的方式：通过useSelector同时获取balance和购物车状态，在组件中判断余额是否充足，再决定是否dispatch Action。修正你当前组件的变量名错误后示例：

const component = () => {
  const selectedProduct = useSelector(state => state.cart.selectedProduct);
  const balance = useSelector(state => state.user.balance); // 假设balance在user reducer中
  const productsInCart = useSelector(state => state.cart.productsInCart);
  const totalCartPrice = sum(productsInCart, 'price');
  const availableBalance = balance - totalCartPrice;
  const dispatch = useDispatch();

  return (
    <div>
      <div onClick={() => {
        if (availableBalance >= selectedProduct.price) {
          dispatch(cartActions.addProduct(selectedProduct));
        }
      }}>
        添加选中产品
      </div>
    </div>
  )
}

（2）使用Redux Thunk处理复杂业务逻辑

若验证逻辑复杂或需异步操作，可将逻辑放到Thunk Action Creator中，Thunk可通过getState()获取全局状态：

// Thunk Action Creator
export const addProductIfBalanceEnough = (product: Product) => {
  return (dispatch, getState) => {
    const state = getState();
    const balance = state.user.balance;
    const totalCartPrice = sum(state.cart.productsInCart, 'price');
    
    if (balance >= totalCartPrice + product.price) {
      dispatch(cartActions.addProduct(product));
    }
  }
}

// 组件中调用
<div onClick={() => dispatch(addProductIfBalanceEnough(selectedProduct))}>
  添加选中产品
</div>

（3）避免在Reducer中处理跨状态逻辑

Redux的Reducer设计遵循单一职责，每个Reducer只管理自身状态，不应直接访问其他Reducer的状态。跨状态的验证逻辑应放在组件或Thunk中，Reducer仅负责纯状态更新。

3. 与计数器示例的区别 #

计数器示例的增减操作仅依赖当前Reducer的状态（如count），逻辑极简，因此Action无需payload（如INCREMENT），Reducer直接执行state.count + 1即可。而你的场景涉及跨状态验证（余额是否充足），这属于业务逻辑，不属于纯状态更新逻辑，因此不能仅在Reducer中处理，必须将验证逻辑放到组件或Thunk中，Reducer只负责接收明确指令（如“添加某产品”）并更新状态。

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