React Redux Thunk Chaining Actions 问题答案

【问题标题】：React Redux Thunk Chaining Actions IssueReact Redux Thunk Chaining Actions 问题
【发布时间】：2019-04-08 06:13:35
【问题描述】：

我正在制作一个反应应用程序，并且一直在使用带有 thunk 的 redux 并取得了一些成功，但是，我最近需要链接一些操作。我似乎遇到的问题是，即使是第一个操作的 api 调用也会返回 422，所以我希望返回 Promise.reject(error); 会阻止堆栈继续，但无论如何它都会继续向下移动。

这里有一些代码：

actions.js

这是我尝试使用的链式操作：

export const resetPasswordAndRefreshUser = (password, password_confirmation) => {
  return (dispatch, getState) => {
    return dispatch(resetPassword(password, password_confirmation))
      .then((result) => {

        //// This shouldn't get executed in resetPassword rejects /////
        //// console.log(result) is undefined ////

        return dispatch(getAuthedUser());

      }, (error) =>{
        // Do Nothing
      }).catch((error) => {
        return Promise.reject(error);
      });
  }
};

以及动作定义本身：

export const resetPassword = (password, password_confirmation) => {
  return dispatch => {
    dispatch({
      type: authConstants.LOGIN_RESET_REQUEST
    });

    return AuthService.resetPassword(password, password_confirmation)
      .then((result) => {
        dispatch({
          type: authConstants.LOGIN_RESET_SUCCESS
        });
        dispatch({
          type: alertConstants.SUCCESS,
          message: 'Your new password was set successfully.'
        });
        history.push('/');
      }, error => {
        dispatch({
          type: authConstants.LOGIN_RESET_ERROR
        });
        dispatch({
          type: alertConstants.ERROR,
          message: 'Error: ' + error
        });
      });
  }
};


export const getAuthedUser = () => {
  return dispatch => {
    dispatch({
      type: authConstants.LOGIN_AUTHED_USER_REQUEST
    });

    return AuthService.getAuthedUser()
      .then((result) => {
        dispatch({
          type: authConstants.LOGIN_AUTHED_USER_SUCCESS,
          user: result
        });
      }, error => {
        dispatch({
          type: authConstants.LOGIN_AUTHED_USER_ERROR
        });
        dispatch({
          type: alertConstants.ERROR,
          message: 'Error: ' + error
        });
      });
  };
};

service.js

static getAuthedUser = () => {
    return API.get(config.api.url + '/me')
      .then((response) => {
        // Get Current User From LocalStorage
        const vmuser = JSON.parse(localStorage.getItem('vmuser'));
        if (vmuser) {
          // Update User & Set Back In LocalStorage
          vmuser.user = response.data;
          localStorage.setItem('vmuser', JSON.stringify(vmuser));
        }
        return response.data;
      }).catch(error => {
        return Promise.reject(error);
      }).finally(() => {})
  };

  static resetPassword = (password, password_confirmation) => {
    return API.post(config.api.url + '/reset', { password, password_confirmation })
      .then((response) => {
        return response.data;
      }).catch(error => {
        console.log('reset error');
        return Promise.reject(error);
      }).finally(() => {})
  };

现在 resetpassword api 调用返回 422（如我所愿，用于测试）。但是当我查看网络请求选项卡时，我仍然看到 getAuthedUser 调用正在进行，即使承诺应该在 authservice 中被拒绝。

我是否只是误解了 Promise 以及何时应该执行 .then()？

【问题讨论】：

看起来你已经自己解决了你的问题，但有一点建议：不要混用promise.then(..., onRejected)和promise.catch()。在引擎盖下，它们做同样的事情，通过将它们结合起来，你最终会得到与你期望的结果不符
@ChristopherMoore 感谢您的建议，我一定会删除其中一个。哪个是首选？我想我假设.catch() 会捕获异常，而(error) => {} 会捕获承诺拒绝。
他们做同样的事情developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - 我通常更喜欢使用 catch，因为它在定义中是明确的

标签： javascript reactjs redux redux-thunk

【解决方案1】：

啊，由于进一步的谷歌搜索，我想我发现了正确的方法：

在我的组合操作中，我添加了对当前状态的检查：

// State Updated, Check If Successful
if (true === getState().auth.resetPassword) {
  return dispatch(getAuthedUser());
}

所以组合操作的完整代码如下所示：

export const resetPasswordAndRefreshUser = (password, password_confirmation) => {
  return (dispatch, getState) => {
    return dispatch(resetPassword(password, password_confirmation))
      .then((result) => {
        // State Updated, Check If Successful
        if (true === getState().auth.resetPassword) {
          return dispatch(getAuthedUser());
        }
      }, (error) => {
        // Do Nothing
      }).catch((error) => {
        return Promise.reject(error);
      });
  }
};

【讨论】：