Redux Ducks 패턴 사용해보기

액션 타입, 액션 생성함수, 리듀서 함수를 기능별로 파일 하나에 몰아서 다 작성하는 방식을
Ducks(덕스) 패턴 이라고 부릅니다

Ducks 패턴을 사용한 COUNTER 모듈 작성하기

Ducks 패턴을 사용하여 액션 타입, 액션 생성함수, 리듀서를 작성한 코드를 모듈 이라고 합니다

1. 액션 타입 정의하기

modules 디렉터리를 생성하고 그안에 counter.js 파일 만들고 코드 작성

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

가장 먼저 해야할 작업은 액션 타입을 정의하는 것입니다.
액션 타입은 대문자로 정의하고 문자열 내용은 '모듈 이름/액션 이름' 과 같은 형태로 작성합니다.
문자열 안에 모듈 이름을 넣음으로써 나중에 프로젝트가 커졌을 때 액션의 이름이 충돌되지 않게 해 줍니다.

2. 액션 생성 함수 만들기

액션 타입을 정의한 다음에는 액션 생성 함수를 만들어 주어야 합니다.

export const increase = () => ({ type:INCREASE });
export const decrease = () => ({ type:DECREASE });

여기서 함수 앞에 export 키워드를 붙임으로써 나중에 함수를 다른 파일에서 불러와 사용할 수 있습니다

3. 초기 상태 및 리듀서 함수 만들기

counter 모듈의 초기 상태와 리듀서 함수를 만들어야 합니다.

// 초기 상태
const initialState = {
  number: 0
};

const counter = ( state = initialState, action){
  switch(action.type){
    case INCREASE:
      return {
        number: state.number + 1
      };
    case DECREASE:
      return {
        number : state.number -1
      };
    default:
      return state;
  }
}

export default counter;

모듈 불러오기

import counter from './counter' // default 키워드를 붙여 작성한 모듈
import { increase, decrease } from './counter' // export 키워드만 작성한 모듈

// 한번에 불러오기
import counter, { increase, decrease } from './counter'