4장. Ducks 구조와 redux-actions 사용하기

https://velopert.com/3358

Redux 를 통한 React 어플리케이션 상태 관리 :: 4장. Ducks 구조와 redux-actions 사용하기 | VELOPERT.LOG

해당 포스팅은 이 글을 읽으면서 저의 언어로 다시 정리한 포스팅입니다.

 

Redux 공식 문서에는 Action, ActionType, Reducer 이 3가지를 따로 만든다. 하나의 액션을 추가하려면 3가지 파일을 모두 수정하여야 한다. 상태관리를 편하게 하려고 redux 를 사용하는데 오히려 더 복잡해진다. 

 

이 포스팅을 통해 redux를 편하게 사용하는 법에 대해 살펴보자.

 

Ducks 구조

Reducer 파일 안에 액션타입과 액션 생성자 함수를 함께 넣어서 관리하고 이를 '모듈'이라 한다.

// widgets.js

// Actions
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

// Action Creators
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

여기에다가 액션을 더욱더 쉽게 관리할 수 있는 redux-actions까지 알아보자

 

redux-actions 를 통한 더 쉬운 액션관리

createAction을 통한 액션 생성 자동화

기존 코드는 아래와 같다

export const increment = (index) => ({
    type: types.INCREMENT,
    index
});

export const decrement = (index) => ({
    type: types.DECREMENT,
    index
});

createAction을 사용하면 아래와 같이 간단해진다.

export const increment = createAction(types.INCREMENT);
export const decrement = createAction(types.DECREMENT);

switch문 대신 handleActions 사용하기

const reducer = handleActions({
  INCREMENT: (state, action) => ({
    counter: state.counter + action.payload
  }),

  DECREMENT: (state, action) => ({
    counter: state.counter - action.payload
  })
}, { counter: 0 });