React结合Redux：Action调用后在事件处理器中获取更新Props的方法与最佳实践

你碰到的打印旧值的情况是React快照机制的正常表现，并非Redux异常。你尝试在同一个事件处理器中调用action后直接读取更新后的props的写法，属于不规范的反模式，不推荐使用。

为什么同一个处理器里拿不到更新后的props #

• 组件的props是每次渲染时生成的状态快照，会被绑定到当前事件处理器的闭包中。
• 调用props.buyCake()本质是触发Redux的dispatch流程：Redux store的state更新是同步完成的，但React需要等当前点击事件的所有同步代码执行完毕后，才会触发组件重渲染、生成新的props、绑定新的事件回调。因此当前这次点击的闭包里，永远只会保存点击发生时的旧props值，哪怕store已经完成了更新。

实现衍生逻辑的正确方案 #

根据你的使用场景，有三类合规的实现方式：

1. 渲染类的衍生值 #

如果乘2后的值是用于页面展示的，直接通过Redux selector派生即可，完全不需要在事件处理器中计算：

const mapStateToProps = (state) => {
  return {
    numOfCakes: state.cake.numOfCakes,
    // 直接从最新的store状态派生计算值
    doubledNumOfCakes: state.cake.numOfCakes * 2
  }
}

渲染时直接使用doubledNumOfCakes即可，store状态变化时selector会自动重算，永远能拿到最新值。

2. 点击后的副作用逻辑 #

如果乘2的逻辑是点击后需要执行的副作用（比如打印日志、发请求、弹提示），有两种合规写法：

• 直接从Redux store实例读取实时状态：dispatch完成后直接调用store.getState()获取最新的state值计算，不需要等待组件重渲染：

  // 引入你初始化的Redux store实例
  import store from './store'
  
  // 点击回调
  () => {
    props.buyCake()
    const latestNum = store.getState().cake.numOfCakes
    console.log("num multiplied by 2", latestNum * 2)
  }
  

• 把逻辑放到Redux中间件中执行：比如用redux-thunk、redux-saga在状态更新完成后触发副作用，更符合Redux单向数据流的设计约定。

3. 组件内监听状态变化 #

如果必须在组件内执行逻辑，用useEffect监听props的变化即可，不需要强行绑定到点击事件的执行流程：

useEffect(() => {
  console.log("num multiplied by 2", props.numOfCakes * 2)
}, [props.numOfCakes])

为什么你的写法不推荐 #

• 逻辑分散：把衍生计算和副作用绑在事件回调里，会让状态流向难追踪，后续排查问题时很难定位乘2的数值从哪来、什么时候触发的。
• 容易出bug：靠闭包捕获的旧props做计算，很容易出现你现在碰到的打印旧值这类状态不同步的问题。
• 违背Redux的设计约定：Redux的核心是单向数据流——所有状态变更由action触发，所有衍生状态从store派生，在组件事件里临时计算状态值不符合这个设计原则。

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