항해중인 개발자

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

React

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

바다를바라보다 2021. 3. 26. 23:48

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 };

'React' 카테고리의 다른 글

리덕스 0327  (0) 2021.03.28
라우트 0327  (0) 2021.03.27
액션과 리듀서를 편하게 만들어주는 모듈  (0) 2021.03.26
프로토 타입이란?  (0) 2021.03.26
리액트 2주차 문법 돌아보기 함수 그리고 객체약간  (0) 2021.03.26
리액트 2주차 문법 돌아보기  (0) 2021.03.26
0 Comments
댓글쓰기 폼