ReactJS - Ducks 파일 구조

리덕스에서 사용하는 파일들은 일반적으로 

액션 타입, 액션 생성 함수, 리듀서 이렇게 세 종류로 분류하여 관리한다.

리덕스 공식 문서에서도 기초를 다룰 때는 이 방식으로 설명한다. 하지만 파일들을 어떻게 구조화할지 정해진 방식은 없다.

 

이렇게 파을을 세 종류 나누어 리덕스 관련 코드를 작성하다 보면 액션을 하나 만들때마다 파일 세개를 수정해야 한다.

그렇게까지 번거로운 작업은 아니지만, 몇몇 개발자는 귀찮았던 모양이다.

이 처럼 '액션 타입, 액션 생성 함수, 리듀서를 모두 한 파일에서 모듈화하여 관리하면 어떨까?' 라는 아이디어로 만든 파일 구조가 바로 

Ducks파일 구조이다. 

이 파일 구조는 개발자인 erikras(Erik Rasmussen)가 처음으로 제시했는데(https://gtihub.com/erikras/ducks-modular-redux), 

많은 리액트 개발자에게 지지를 받았다.

- Ducks구조를 사용한 예시 모듈

 
// 액션 타입
const CREATE = 'my-app/todos/CREATE';
const REMOVE = 'my-app/todos/REMOVE';
const TOGGLE = 'my-app/todos/TOGGLE';
 
//액션 생성 함수
export const create = (todo) => ({
    type : CREACT,
    todo,
});
 
export const remove = (id) => ({
    type : REMOVE,
    id
});
 
export const toggle = (id) => ({
    type : TOGGLE,
    id
});
 
const initialState ={
    //초기 상태...
}
 
export default function reducer(state = initialState, action){
    switch(action.type){
        // 리듀서 관련 코드...
    } 
}

Ducks 구조에서는 이처럼 파일 안에 액션 타입, 액션 생성 함수, 리듀서를 한꺼번에 넣어서 관리하는데 이를 모듈 이라고 한다.

- 규칙

Ducks 구조에서 지켜야 할 규칙

• export default를 이용하여 리듀서를 내보내야 한다.
• export를 이용하여 액션 생성 함수를 내보내야 한다.
• 액션 타입 이름은 npm-module-or-app/reducer/ACTION_TYPE 형식으로 만들어야 한다
  [라이브러리를 만들거나 애플리케이션을 여러 프로젝트로 나눈 것이 아니라면 맨 앞은 생략해도 된다.(예: counter/INCREMENT)].
• 외부 리듀서에서 모듈의 액션타입이 필요할 때는 액션 타입을 내보내도 된다.

Ducks 구조를 사용할 때는 이 몇 가지 규칙을 준수한다.