20210703 TIL

bandor·2021년 7월 3일
0

항해99

목록 보기
20/28
post-thumbnail

redux-actions

action creator와 reducer를 편리하게 선언하고 코딩할 수 있게 돕는 라이브러리.

기존 action creator는 return 해야할 객체를 일일이 코딩했다. action의 수만큼 만들어야할 객체가 늘어났는데, redux-actions의 createAction()createActions() 를 사용하면 간단하게 작성할 수 있다.

import {createAction} from 'redux-actions';

const LOG_IN = "LOG_IN";

const logIn = createAction(LOG_IN, (user) => ({user}));

// or
import {createActions} from 'redux-actions';

const LOG_OUT = "LOG_OUT";
const { logIn, logOut } = createActions({
  LOG_IN: (user) => ({user}),
  LOG_OUT: (user) => ({user})
});

기존 reducer는 action.type을 switch-case 문으로 구분해, 작업을 처리했다.
reducer는 다음과 같이 코딩할 수 있다.

import {handleActions} from "redux-actions";

export default reducer = handleActions({
  LOG_IN: (state, action) => { action.payload.id ... },
  LOG_OUT: (state, action) => { ... },
  [COUNT_DOWN, DECREASE]: (state, action) => { ... },
}, { isLogin: false, count: 0 });

기존 reducer에선 action으로부터 받아온 data를 action.blahblah 로 받아왔었지만, handleAction()을 사용하면 action.payload.blahblah 형식으로 받아올 수 있다.

handleActions() 의 2번째 인자는 initialState 값이다.

handleActions()의 1번째 인자로 들어가는 객체의 key를 배열로 묶음으로서, 여러 action type에 동일한 처리를 할 수 있다.

Immer(야 임마!)

React State의 불변성을 편리하게 유지시켜주는 라이브러리.

setState를 사용하거나 redux의 reducer를 통해 return할 때, 늘 이전의 state를 복사해 새로운 state를 만들어 덮어써왔다. 이런 작업은 React를 처음 공부하는 입문자에게 굉장히 번거로운 작업으로 느껴진다. 일반적인 Javascript의 변수를 바꾸듯이 State도 동일한 방법으로 바꿔지면 정말 편해질 것이다. 이를 구현한 것이 Immer와 같은 불변성 관리 라이브러리라고 할 수 있다.

import { produce } from 'immer';

export default reducer = handleActions({
  INCREASE: (state, action) => produce(state, (draft) => {
    draft.count += 1
  }),
}, { count: 0 });

state의 복사본(draft)을 만들어, 복사본을 수정하면 state에 적용시키는 방식이라고 한다. 내부적으로 proxy를 사용했다고 하는데, generator, iterator와 함께 다음에 공부해보는 걸로...

profile
빵돌입니다. 빵 좋아합니다.

0개의 댓글