react-redux dispatch执行完成后如何调用函数并判断报错状态？

问题原因 #

你遇到的提交后错误提示滞后的问题，根本原因有两个：

1. addCategory是异步Thunk函数，你原有代码中dispatch它的时候没有加await，调用判断逻辑时异步请求还没执行完成，Redux Store里的error还没更新，拿到的是上一次渲染缓存的旧值。
2. 组件通过useSelector获取的error属于当前渲染闭包中的值，只有组件触发重新渲染后才能拿到更新后的值，在handleSubmit的同步执行流里拿不到dispatch修改后的最新值。

解决方案 #

方案1：用useEffect监听error变化（更符合React响应式逻辑，推荐）

直接监听Store中error的变化，只要error更新就自动触发判断逻辑，不需要耦合提交函数的执行时机：

import { useEffect } from 'react'

// 注意：不要用try作为函数名，这是JS保留关键字，会触发语法错误
const checkError = () => {
  if (error !== null) {
    console.log("with err");
    // 错误提示展示完成后记得重置error，避免下次提交还残留旧错误
    // 可以新增一个RESET_ERROR的action，dispatch({type: 'RESET_ERROR'})
  } else {
    console.log("no err");
  }
}

// 监听error变化，每次更新自动执行判断
useEffect(() => {
  checkError()
}, [error])

原有handleSubmit不需要加额外判断逻辑，正常dispatch即可。

方案2：在Thunk中返回执行结果，提交函数中直接判断

如果需要在提交函数的执行流里直接拿到结果，可以修改Thunk返回执行状态，dispatch时加await取返回值判断：
首先修改addCategory，返回执行结果：

export const addCategory =
  ({ category, identifier, definition }) =>
  async (dispatch) => {
    try {
      const { data } = await axios.post(
        "http://localhost:5000/Admin/addCategory",
        { category, identifier, definition }
      );
      dispatch({ type: "ADD_CATEG", payload: data });
      // 返回成功标识
      return { success: true }
    } catch (error) {
      const errMsg = error.response.data.errorMessage
      dispatch({
        type: "GET_ERROR",
        payload: errMsg,
      });
      // 返回失败标识和错误信息
      return { success: false, error: errMsg }
    }
  };

然后修改handleSubmit加async和await：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const res = await dispatch(addCategory({ category, identifier, definition }));
    if (res.success) {
      console.log("no err");
    } else {
      console.log("with err", res.error);
    }
  } catch (err) {
    console.log(err.message);
  }
};

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