如何在另一个动作成功后调用redux动作?

时间:2016-11-28 10:24:07

标签: reactjs functional-programming redux react-redux flux

所以我有一个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)auth的加载,并且LOGIN / LOGOUT是不言自明的。

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

我想执行GET请求以获取有关仅在登录后才可用的用户的私有数据,并将此私有数据存储在redux存储中以供应用程序的各个部分使用。我该怎么做?

1 个答案:

答案 0 :(得分:10)

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

您必须编写异步操作创建程序,它将调用多个操作。

类似的东西:

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