React Native：点击按钮向Redux传参并跳转页面问题及解决

我最近碰到个棘手的问题：想在按钮点击时先把数据存入Redux Store，再跳转到下一页。结果页面能正常跳转，但Redux的Reducer完全没触发，Store里的数据根本没更新。

初始问题代码 #

// 按钮绑定的 onPress 事件
<Components.ChampagneButton onPress={() => this.saveTypeAndGoToNextScreen(type)} />

// 最初的处理函数
saveTypeAndGoToNextScreen = type => { 
  this.saveType(type) 
  this.submit() 
}

saveType = type => this.props.onChange({ type })

submit = () => helpers.goToScreen('NewJobInfo', this.props)

// 组件与Redux的连接逻辑
export default helpers.connectToRedux( 
  state => ({ job: state.newJob }), 
  dispatch => ({ onChange: job => dispatch(actions.buildNewJob(job)) }) 
)(NewJobType)

问题原因分析 #

后来我才搞明白，虽然代码里写的是先调用saveType再执行submit导航，但同步执行的导航操作可能会导致组件在Redux Store完成更新前就被卸载——尤其是当导航是立即跳转（比如直接替换路由栈）时，组件的生命周期被中断，导致看起来Reducer没触发（其实可能已经触发了，但组件没机会感知到）。

可用解决方案（已验证） #

调整函数的执行逻辑，确保Redux的状态更新完成后再触发导航。我这里直接优化了saveTypeAndGoToNextScreen的写法，保证状态更新优先完成：

// 优化后的处理函数
saveTypeAndGoToNextScreen = type => { 
  this.saveType(type)
  // 利用setTimeout让Redux完成状态更新后再导航
  setTimeout(() => this.submit(), 0)
}

// 其余代码保持不变
saveType = type => this.props.onChange({ type })

submit = () => helpers.goToScreen('NewJobInfo', this.props)

export default helpers.connectToRedux( 
  state => ({ job: state.newJob }), 
  dispatch => ({ onChange: job => dispatch(actions.buildNewJob(job)) }) 
)(NewJobType)

如果你的Redux使用了异步中间件（比如Thunk），也可以让saveType返回Promise，然后用async/await来确保顺序：

// 假设saveType是异步函数（比如action是Thunk）
saveType = async type => {
  await this.props.onChange({ type })
}

saveTypeAndGoToNextScreen = async type => { 
  await this.saveType(type)
  this.submit() 
}

这样调整后，就能保证先把数据成功存入Redux Store，再跳转到下一个页面了。

内容的提问来源于stack exchange，提问作者Brett S.