reactjs - 如何在另一个操作成功后调用 redux 操作？

Question

所以我有一个与 auth 相关的 reducer 设置如下:

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case LOAD:
      return {
        ...state,
        loading: true,
      }
    case LOAD_SUCCESS:
      return {
        ...state,
        loading: false,
        loaded: true,
        jwt: action.jwt,
      }
    case LOAD_FAIL:
      return {
        ...state,
        loading: false,
        loaded: false,
        error: true,
        errorMessage: action.error,
      }
    case LOGIN:
      return {
        ...state,
        loaded: false,
        loggingIn: true,
      }
    case LOGIN_SUCCESS:
      return {
        ...state,
        loaded: true,
        loggingIn: false,
        jwt: jwtDecode(action.result.token),
      }
    case LOGIN_FAIL:
      return {
        ...state,
        loggingIn: false,
        user: null,
        error: true,
        errorMessage: action.error,
      }
    case LOGOUT:
      return {
        ...state,
        loggingOut: true,
      }
    case LOGOUT_SUCCESS:
      return {
        ...state,
        loggingOut: false,
        user: null,
        jwt: null,
      }
    case LOGOUT_FAIL:
      return {
        ...state,
        loggingOut: false,
        error: true,
        errorMessage: action.error,
      }
    default:
      return state
  }
}

其中 LOAD 是加载先前存储的(cookie 或 JWT)身份验证，而 LOGIN/LOGOUT 是不言自明的。

成功加载或登录后，我需要触发一些进一步的操作。

我想执行 GET 请求来获取有关用户的一些私有(private)数据，这些数据仅在登录后可用，并将这些私有(private)数据存储在 redux 存储中以供应用程序的各个部分使用。我该怎么做？

Answer 1

您应该使用async actions来实现这一目标。

您必须编写异步操作创建器，它将调用多个操作。

类似的东西:

function multipleAtions() {
 return (dispatch) => { 
   dispatch(load_action);
   return fetch(`http://some_request_here`)
          .then(() => dispatch(another_action);
 }
}