dispatch完全执行完成后如何访问最新的Redux state？

问题根源 #

你遇到的读取不到最新status的问题是两个原因共同导致的：

• onSubmit函数里的status是当前组件渲染闭包中捕获的旧值，Redux dispatch更新store后只会触发组件重新渲染，新的status会在下次渲染时生成，不会修改当前闭包里的旧值
• 你定义的addUser thunk没有把接口返回的结果return出来，所以dispatch后的then回调拿不到响应数据

解决方案1：使用useEffect监听状态变化（推荐） #

这是最符合React响应式范式的写法，逻辑和事件触发解耦：
首先修正thunk逻辑，补充加载、错误场景的状态更新：

const addUser = (values) => async (dispatch) => {
  try {
    dispatch({ type: "ADD_USER_PENDING" })
    const response = // 发起API调用
    const resData = response.data
    dispatch({ type:"ADD_USER", payload: resData })
    return resData
  } catch (err) {
    dispatch({ type: "ADD_USER_FAILED", payload: err.message })
  }
}

对应的reducer同步处理三类action：

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case "ADD_USER_PENDING":
      return { ...state, loading: true, status: false, error: false }
    case "ADD_USER":
      return { ...state, loading: false, status: true, error: false }
    case "ADD_USER_FAILED":
      return { ...state, loading: false, status: false, error: action.payload }
    default:
      return state
  }
}

在组件中通过useEffect监听状态变化，执行后续逻辑：

const { loading, status, error } = useSelector(state => state.newUser)

// 提交结果变化时自动触发
useEffect(() => {
  // 排除初始加载状态的误触发
  if (!loading) {
    if (!status) {
      // 此处写错误展示逻辑，比如弹出提示、显示表单错误信息
      console.log('提交失败', error)
    } else {
      // 此处写提交成功逻辑，比如重置表单、跳转页面
      console.log('提交成功')
    }
  }
}, [loading, status, error])

const onSubmit = (values) => {
  dispatch(addUser(values))
}

解决方案2：在thunk回调中直接判断结果 #

如果你不想额外加useEffect监听，也可以直接在dispatch的回调中拿接口返回结果判断，不需要读取store状态：
首先修正thunk的返回值：

const addUser = (values) => async (dispatch) => {
  const response = // 发起API调用
  const resData = response.data
  dispatch({type:"ADD_USER", payload: resData})
  return resData // 必须return结果才能被外层拿到
}

修改onSubmit逻辑：

const onSubmit = async (values) => {
  const resData = await dispatch(addUser(values))
  // 直接用接口返回的状态判断，不读取当前闭包的旧值
  if (!resData.status) {
    // 展示错误逻辑
  }
}

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