Redux의 Ducks Pattern

Ducks Pattern

Ducks Pattern이란?

리덕스를 사용하다 보면 수많은 Action과 Action Creator, Reducer들을 정의하게 되면서 리덕스의 복잡도도 높아지게 된다.

 

이런 상황에서 Action, Action Creator, Reducer들을 어떤 규칙에 따라 정리해놓지 않으면 나중에는 코드를 작성한 사람도 이해하지 못하는 상태가 될 수 있다. 그래서 등장하게 된 것이 바로 덕스 패턴이다.

 

덕스 패턴은 Action, Action Creator, Reducer들을 하나의 모듈처럼 한 파일 안에 작성하는 규칙이다.

Ducks Pattern 규칙

덕스 패턴에는 몇 가지 지켜야 할 규칙들이 있다.

 

1. 반드시 리듀서 함수를 default export해야 한다.
2. 반드시 액션 생성 함수를 export해야 한다.
3. 반드시 접두사를 붙인 형태로 액션 타입을 정의해야 한다.
4. 액션 타입은 영어 대문자만을 사용하여 UPPER_SNAKE_CASE 형태로 작성해야 하며 외부에서 액션 타입을 필요로 할 경우에는 named export를 할 수 있다.

Ducks Pattern 예시 코드

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

// Action Creator
export const increase = () => {
  return { type: INCREASE }
}
export const decrease = () => {
  return { type: DECREASE }
}

// InitialState
const initialState = {
  count: 0,
};

// Reducer
function counterReducer(state = initialState, action) {
  if(action.type === 'INCREASE'){
    return { ...state, count: state.count + 1 }
  } else if(action.type === 'DECREASE'){
    return { ...state, count: state.count - 1 }
  } else {
    return state
  }
}

export default counterReducer;