본 포스팅은 깃헙 블로그 사용 당시 작성한 포스팅입니다.

Redux의 작성 패턴

리덕스를 작성할 때 redux 폴더를 생성하고 constants, actions, reducers, store 폴더를 모두 따로 만들어 관리하는 패턴이다. 공식 문서에서 리덕스 사용 설명을 위해 제공되는 예시가 이와 같이 작성되어있다.

위와 같이 redux라는 상위폴더 안에 각 요소들을 모아둔 폴더를 각각 따로 만들어 관리하게 된다.

덕스(Ducks) 패턴

덕스 패턴은 위의 방식과는 달리 module화 시켜 보관한다. 예를들어 counter app을 만들기 위해 counter.js 를 만든다면 modules 폴더를 만들어 counter.js 내부에 constant, action, reducer 를 모두 작성해 보관한다. 이 때 store만 index.js 파일을 만들어 따로 보관한다.

덕스 패턴 작성 시 주의할 점

1. 덕스 패턴 작성은 constant, action, reducer 순으로 작성해 관리한다.
2. constant(액션타입) 의 경우 다른 모듈과 이름이 겹칠 수 있으므로 반드시 접두사를 붙여 관리한다.

1
2

const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";

3. 익스포트 규칙

   1. constants는 export하지 않는다
   2. action은 named export를 사용해 export한다.
   3. reducer는 default export를 사용해 export한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";

export function Increase(diff) {
  return {
    type: INCREASE,
    payload: { diff },
  };
}

export function Decrease(diff) {
  return {
    type: DECREASE,
    payload: { diff },
  };
}

const initialState = { number: 0 };

export default function counter(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return { number: state.number + action.payload.diff };
    case DECREASE:
      return { number: state.number - action.payload.diff };
    default:
      return state;
  }
}