액션과 리듀서를 편하게 만들어주는 모듈

yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0

yarn add immer redux-actions

 

import { createAction, handleActions } from "redux-actions"; //액션과 리듀서를 편하게 만들어주는 모듈
import { produce } from "immer";
import { setCookie, getCookie, deleteCookie } from "../../shared/Cookie";

//액션
const LOG_IN = "LOG_IN";
const LOG_OUT = "LOG_OUT";
const GET_USER = "GET_USER";

//액션 크리에이터

const logIn = createAction(LOG_IN, (user) => ({ user })); //파라미터들 받아온 것을 이렇게 넘겨준다
const logOut = createAction(LOG_OUT, (user) => ({ user }));
const getUser = createAction(GET_USER, (user) => ({ user }));

//이니셜 스테이트 디폴트 프롭스와 비슷함
const initialState = {
  user: null, // 처음엔 로그인이 안돼 있으니까
  is_login: false,
};

//리듀서
export default handleActions(
  {
    //원본 값을 복사한 값을 draft 라고 받아온다
    [LOG_IN]: (state, action) =>
      produce(state, (draft) => {
        setCookie("is_login", "success");
        draft.user = action.payload.user;
        draft.is_login = true;
      }), //이 작업 안에서 일어나는 것들을 불변성을 유지하기 위해 immer 사용
    [LOG_OUT]: (state, action) => produce(state, (draft) => {}),
    [GET_USER]: (state, action) => produce(state, (draft) => {}),
  },
  initialState
);

//액션생성함수 export

const actionCreatorts = {
  logIn,
  logOut,
  getUser,
};

export { actionCreatorts };