web-dev-qa-db-ja.com

別のアクションが成功した後にreduxアクションを呼び出す方法は？

したがって、auth関連のレデューサーを次のように設定します。

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は自明です。

LOADまたはLOGINが成功した後、さらにいくつかのアクションをトリガーする必要があります。

GETリクエストを実行して、ログインして初めて利用できるユーザーに関するプライベートデータを取得し、このプライベートデータをreduxストアに保存して、アプリケーションのさまざまな部分で使用できるようにします。それ、どうやったら出来るの？

reactjsfunctional-programmingreduxreact-reduxflux
6
j_d

これを実現するには、 非同期アクション を使用する必要があります。

複数のアクションを呼び出す非同期アクションクリエーターを作成する必要があります。

そんな感じ：

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