Redux-thunk 이해하기

이영광·2021년 12월 23일
0

리액트

목록 보기
9/9
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,
  };
};

간략하게 미들웨어함수로 디스패치를 계속 다시할수 있으며 타입별로 나눠서 리퀘스트를 보낸다음에 성공시 실패시 등 액션타입을 적용해서 리듀서를 호출하고 실행한다

profile
《REACT》《JAVASCRIPT 》 만지고있어욤

0개의 댓글