如何使用 redux-thunk 和 try-catch 处理 react 的多个调度结果？

Question

我正在使用 redux-thunk 对 return 返回状态进行操作调用和缩减器。我的操作本质上是对后端的 axios API 请求。对于一个特定的操作，我需要按照代码中显示的确切顺序调度一组事件：

检查用户传递的 tokenvalue 是否有效（它有自己的 axios api 请求 tokencollection）。如果 1. 失败，则跳转到 catch 块。
如果token确实有效，使用axios注册用户post。如果 2. 失败，跳转到 catch 块
如果用户注册成功，则为用户设置令牌（因此每个用户只有一个唯一令牌）。如果 3. 失败，则跳转到 catch 块。

为了按照上面的顺序依次实现，我把它们放在了try-catch块中。事实证明我对 dispatch 工作原理的理解是错误的——如果分派因错误而失败，它仍会执行后续分派。关于如何解决这个问题的任何建议？ :

export const register = ({name,email,password,tokenval}) => async(dispatch) =>{
try{
    await dispatch(checkTokenValidity(tokenval)); // if this fails, jump to catch block
    const res = await axios.post("/api/users", body, config); //if this fails jump to catch
    await dispatch(setUserToToken({ tokenval, userID: res.data.userID })); //if this fails jump to catch
    dispatch({
      type: REGISTER_SUCCESS,
      payload: res.data,
    });
}catch(err){
  dispatch({
      type: REGISTER_FAIL,
    });
}
};

Answer 1

确保 checkTokenValidity 在失败时抛出错误。这样，它会自动转到 catch 块
无需使用分派和等待令牌有效性
存储 api 变量结果并进行必要的检查并相应地分派操作。

你的重构代码

export const register = ({ name, email, password, tokenval }) => async (
  dispatch
) => {
  try {
    const isValidToken = await checkTokenValidity(tokenval); // no need of dispatch - just make sure that the checkTokenValidity throws an error upon fail
    if(!isValidToken ){
        throw new Error('server error - invalid token')
    }
    const usersResult = await axios.post("/api/users", body, config); //if this fails jump to catch
    if(!usersResult ){
        throw new Error('server error - usersResult')
    }
    const setUserToTokenResults = await dispatch(setUserToToken({ tokenval, userID: res.data.userID })); //if this fails jump to catch
    if(!setUserToTokenResults ){
        throw new Error('server error - setUserToTokenResults')
    }
    dispatch({
      type: REGISTER_SUCCESS,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: REGISTER_FAIL,
      payload: {err} //<---- provide some error message to the reducer
    });
  }
};

如何使用 redux-thunk 和 try-catch 处理 react 的多个调度结果？

How to handle multiple dispatch results from react using redux-thunk and try-catch?

promise

reactjs

redux-thunk

react-redux