[React] 리덕스 유저모듈만들기

1. 리덕스 설치

리덕스와 리덕스 모듈 내에서 경로 이동까지 하게 해줄 히스토리, 라우터와 히스토리를 엮어줄 모듈까지 한번에 설치
yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0

 

리듀서에서 뭔가를 바꿀 때 불변성 관리 위해 이번엔 임머라는 패키지 사용한다.

그리고 액션도 매번 맨 위에서 user/CREATE처럼 리듀서 모듈 명에 어떤 타입 넣어서 만들고, 그 아래에는 액션 생성 함수 만들어서 export 다 해주고 좀 귀찮았는데

이걸 redux-actions라는 패키지로 좀 더 편하게 사용할 수 있다.

yarn add immer redux-actions

 

2. user.js 유저모듈 만들기(리듀서)

immer는 불변성 관리를 , redux-actions는 좀 더 편한 액션 관리를 위해 사용한다.

 

Q. 왜 불변성 관리하는데 패키지까지 써야하는이유

A. 객체는 const로 선언해도 내용이 수정될 수 있다. 그래서 스프레드 문법 ({...어떤 것}) 등을 이용해서 수정되지 않게 주의해서 코드를 작성하는데. 그런데, 객체 구조가 복잡해지면 코드를 짜기가 번거로워서 불변성을 신경 쓰지 않는 것처럼 써도 알아서 불변성을 유지해주는 immer를 사용한다.

 

항상 폴더구조는 src 폴더 아래에 redux폴더, 그리고 그 아래에 modules 폴더를 만들어주고 시작하자.

2-1) import 하기

import { createAction, handleActions } from "redux-actions";
//액션 생성 함수 => createAction
//리듀서 => handleActions
import { produce } from "immer";

import { setCookie, getCookie, deleteCookie } from "../../shared/Cookie";

2-2) 액션타입만들기

const LOG_IN = "LOG_IN";
const LOG_OUT = "LOG_OUT";
const GET_USER = "GET_USER";

2-3) 액션생성함수만들기

const logIn = createAction(LOG_IN, (user) => ({ user }));
const logOut = createAction(LOG_OUT, (user) => ({ user }));
const getUser = createAction(GET_USER, (user) => ({ user }));

2-4) initalState 만들기

const initialState = {
  user: null,
  is_login: false,
};

2-5) 리듀서 만들기(immer) 

https://immerjs.github.io/immer/

Introduction to Immer | Immer

export default handleActions(
  {
    [LOG_IN]: (state, action) =>
      produce(state, (draft) => {
        setCookie("is_login", "success");
        draft.user = action.payload.user;
				draft.is_login = true;
      }),
	[LOG_OUT]: (state, action) =>
      produce(state, (draft) => {
        deleteCookie("is_login");
        draft.user = null;
				draft.is_login = false;
      }),
    [GET_USER]: (state, action) => produce(state, (draft) => {}),
  },
  initialState
);

2-6) actionCreators 내보내기

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

export { actionCreators };