Redux-Thunkについて

5633 ワード

export const loginAction = (data) => {
  return (dispatch, getState) => {
    const state = getState();
    dispatch(loginRequestAction());
    axios.post('/api/login').then((res) => {
      dispatch(loginSuccessAction)
    }).catch((err) => {
      dispatch(loginFailureAction(err))
    })
  }
}

export const loginRequestAction = (data) => {
  //액션별로 나눠줘야해서 로그인 로그아웃
  return {
    type: "LOG_IN_REQUEST",
    data,
  };
};
export const loginSuccessAction = (data) => {
  //액션별로 나눠줘야해서 로그인 로그아웃
  return {
    type: "LOG_IN_SUCCESS",
    data,
  };
};
export const loginFailureAction = (data) => {
  //액션별로 나눠줘야해서 로그인 로그아웃
  return {
    type: "LOG_IN_FAILURE",
    data,
  };
};
簡単にミドルウェア関数でdispatchを継続し、タイプ別にリクエストを配布し、成功時に失敗した場合などの動作タイプ呼び出しを適用してリダイレクトを実行できます.