4-1. Ducks 구조

Ducks 구조에는 Reducer 파일 안에 액션타입과 액션생성자 함수를 함께 넣어서 관리하고 이를 '모듈' 이라고 부릅니다.

한번 Ducks 구조를 사용한 예시 모듈을 볼까요?

// 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 };
}

최상단엔 액션타입을 정의하고,

리듀서를 정의하여 export default 로 내보내고,

같은 파일에서 액션생성자도 export 를 통해 내보냅니다.

이 패턴에서 따를 규칙은, 액션 타입을 만들때 npm-module-or-app/reducer/ACTION_TYPE 의 형식으로 만들어야 합니다.

만약에 NPM 모듈을 만드는게 아니라면, reducer/ACTION_TYPE 형식으로만 만들어도 상관없습니다. 이렇게 접두사를 달아주는 이유는 서로다른 리듀서에서 액션이름이 중첩되는것을 방지하기 위함 입니다.

그리고, 리듀서를 만들때는 export default 로 내보내고, 액션생성자는 export 로 내보내주어야합니다.

준수해야 할 규칙은 이게 전부입니다.

곧 우리가 만들었던 카운터를, Ducks 패턴으로 작성해볼텐데요. 그 전에, 액션을 더욱 쉽게 관리 할 수 있 해주는 redux-actions 에 대해서 알아보겠습니다.