[React] 덕스(Ducks) 구조(with.Redux)

 

 

🦆 리액트 덕스(Ducks) 구조란?

 

 

Java에는 jars와 beans이 있고, Ruby에는 gems이 있습니다.
Reducer의 묶음은 "redux"의 마지막 음절을 따서 "ducks"라고 부를 것을 제안합니다.

- Ducks 구조를 제시한 Erik Rasmussen -

 

 

덕스 구조는 리덕스(Redux)를 이용한 개발에 있어 액션 타입(ActionTypes), 리듀서(Reducer), 액션(Actions)을 각각의 파일에 작성해야 하는 번거로움을 피하기 위해 하나의 파일에 관련 코드를 모두 작성하는 구조이다. 

 

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

 

 

 

 

1️⃣ 리덕스의 파일 구조

리덕스는 ActionTypes, Reducer, Actions을 각각의 디렉토리에 파일을 생성해 관리한다.

이러한 구조에서는 기능을 추가하거나 수정할 경우 각각 수정해야 되는 번거로움과 유지보수에 비용이 많이 들게 된다.

 

▪ constants: constants 디렉토리는 액션 객체를 생성하기 위한 상수(ActionTypes)가 저장된다.

// in constants/ActionTypes.js
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

 

▪ actions: actions 디렉토리에서는 ActionTypes를 import 해서 액션 객체 생성자를 관리한다.

// in actions/index.js
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 };
}

 

▪ reducers: reducers 디렉토리에서는 액션에 따라서 어떻게 동작할지가 구현된다.

//in reducers/index.js
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

 

 

 

 

2️⃣ 덕스 파일 구조

각각의 기능별로 하나의 파일에 액션 객체 생성자, 액션 상수, 리듀스 함수 관련 코드를 작성하고 모듈 디렉토리에서 관리하는 파일 구조이다

 

// widgets.js

// Action Types
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 생성자
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 };
}

 

 

 

 

3️⃣ 덕스 파일 구조의 규칙

덕스 파일 구조를 사용할 때는 아래와 같은 규칙을 지켜야 한다.

 

▪ reducer() 라고 불리는 reducer 함수를 export 해야 한다.

▪ 모듈의 action 객체 생성 함수를 export 해야 한다.

▪ action객체의 이름은 해당 reducer 이름의 ACTION_TYPE 형태여야 한다.

▪ action 타입들을 UPPER_SNAKE_CASE로 export 할 수도 있다.

 

 

 

 

 

 

 

 

📌 참고 사이트

https://github.com/erikras/ducks-modular-redux

https://github.com/JisuPark/ducks-modular-redux