React Redux Thunk链接动作问题

时间:2018-11-04 20:15:14

标签: javascript reactjs redux redux-thunk

我正在开发一个React应用,并且一直在使用redux和thunk取得了一些成功,但是,我最近需要链接一些操作。我似乎遇到的问题是,即使第一个操作的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(根据我的要求进行测试)。但是,当我查看“网络请求”选项卡时,尽管仍应在 authservice 中拒绝承诺,但仍会进行 getAuthedUser 调用。

我只是误解了Promise,什么时候应该执行.then()

1 个答案:

答案 0 :(得分:0)

啊,我想我通过进一步的Google搜索发现了执行此操作的正确方法:

在合并操作中,我添加了当前状态的检查:

// 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);
      });
  }
};