React-Redux中如何基于前序状态修改状态？

嘿，我来帮你梳理清楚这个问题～首先直接给你结论：不推荐通过this.props把前序状态传递给action，这大概率就是你收到的值不符合预期的原因，而且也不符合Redux的设计逻辑。下面给你拆解原因和正确做法：

为什么通过this.props传状态不可靠？ #

组件里的this.props是基于上一次渲染的快照，如果你在组件触发action的时候，Redux的状态已经有更新但组件还没完成重新渲染，那this.props拿到的就不是最新的前序状态。尤其是涉及异步操作的时候，这种“状态滞后”的问题会更明显，导致你传递给action的值和实际的Redux状态不一致。

正确的做法有两种，看你的需求选： #

1. 让Reducer直接处理状态对比（最推荐） #

Redux的Reducer本身就接收两个参数：当前的前序状态和action。所以你完全可以在Reducer里直接拿到需要对比的状态，然后根据action的指令来修改状态。这是最符合Redux单向数据流设计的方式。

举个简单的例子，比如我们要实现“只有当前计数为偶数时才递增”的逻辑：

// reducer.js
const counterReducer = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT_IF_EVEN':
      // 这里的state就是前序状态，直接用来判断
      return state % 2 === 0 ? state + 1 : state;
    default:
      return state;
  }
};

组件里只需要触发对应的action就行，不需要传任何状态：

// 组件里的调用
this.props.dispatch({ type: 'INCREMENT_IF_EVEN' });

2. 用Redux中间件在Action里获取最新状态 #

如果你的逻辑必须在action里用到前序状态（比如需要基于状态做一些异步判断），那应该用Redux Thunk（这是最常用的异步中间件，Redux官方也推荐）。Thunk允许你的action creator返回一个函数，这个函数可以拿到dispatch和getState两个参数，getState()能直接获取到Redux store里的最新前序状态，完全不会有组件props滞后的问题。

比如上面的逻辑用Thunk实现：

// actionCreators.js
export const incrementIfEven = () => {
  // 返回一个函数，接收dispatch和getState
  return (dispatch, getState) => {
    // 获取最新的前序状态
    const currentCounter = getState().counter;
    if (currentCounter % 2 === 0) {
      dispatch({ type: 'INCREMENT_IF_EVEN' });
    }
  };
};

组件里调用这个action creator即可：

// 组件里的调用
this.props.incrementIfEven();

总结一下 #

• 优先让Reducer处理状态对比，这是Redux最原生的用法，避免状态不一致的问题
• 如果必须在action里操作状态，用Thunk的getState()获取最新状态，不要从组件传this.props
• 永远不要依赖组件的this.props传递Redux状态到action，因为组件的props不一定是最新的

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