React Native函数组件中onPress调用dispatch后如何知晓store已更新？

分三种常用场景处理：

场景1：使用Redux Toolkit + createAsyncThunk处理异步逻辑 #

这是最简便的方案，createAsyncThunk返回的执行结果是Promise，直接await即可确认异步逻辑执行完成、store状态更新完毕：

// 首先定义异步Thunk
const submitUserInfo = createAsyncThunk('user/submitInfo', async (userData) => {
  const response = await api.postUserInfo(userData)
  return response.data
})

// 组件内onPress逻辑
const onPress = async () => {
  try {
    // await thunk执行完成，此时对应reducer已执行、store状态已更新
    await dispatch(submitUserInfo(formData)).unwrap()
    // 直接执行跳转
    navigation.navigate('NextPage')
  } catch (err) {
    // 可在此处理请求失败逻辑
    console.log('提交失败', err)
  }
}

场景2：使用同步Action、或未使用异步Thunk #

Redux的同步dispatch本身是同步执行的，dispatch调用完成的瞬间store状态就已经更新，但因为函数组件的闭包快照特性，当前渲染周期内拿到的useSelector值还是旧状态，此时可以通过useEffect监听目标状态变化触发跳转：

// 从store中取出跳转判断依赖的状态，比如提交完成标记
const submitSuccess = useSelector(state => state.user.submitSuccess)

const onPress = () => {
  dispatch(submitUserInfoAction(formData))
}

// 监听状态变化，满足条件时跳转
useEffect(() => {
  if (submitSuccess) {
    navigation.navigate('NextPage')
    // 跳转后重置提交状态，避免下次进入组件重复触发跳转
    dispatch(resetSubmitStatus())
  }
}, [submitSuccess, navigation, dispatch])

场景3：使用redux-saga等其他异步中间件 #

推荐通用方案还是和场景2一致，在saga处理完异步逻辑、更新store的提交状态标记后，通过useEffect监听标记触发跳转即可。

注意事项 #

• 不要在dispatch调用后直接读取当前作用域内的useSelector返回值判断状态，闭包特性会导致你拿到的是本次渲染的旧状态
• 如果需要在dispatch后立刻拿到最新状态，也可以直接调用store.getState()获取，但该方式不符合React hooks的响应式设计，优先推荐使用useEffect监听的方案

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