Redux: Ducks패턴이란?🦆

📖 reference link:
1. Redux docs
https://redux.js.org/style-guide/#structure-files-as-feature-folders-with-single-file-logic

---

단일 파일 구조

• Redux Docs :
  https://redux.js.org/style-guide/#structure-files-as-feature-folders-with-single-file-logic
  

Because of this, we recommend that most applications should structure files using a "feature folder" approach (all files for a feature in the same folder). Within a given feature folder, the Redux logic for that feature should be written as a single "slice" file, preferably using the Redux Toolkit createSliceAPI. (This is also known as the "ducks" pattern). While older Redux codebases often used a "folder-by-type" approach with separate folders for "actions" and "reducers", keeping related logic together makes it easier to find and update that code.

---

덕스 패턴 Ducks Pattern / 모듈 module

• Erik Rasmussen 제안

• 액션 타입, 액션 생성 함수, 리듀서를 각각의 별도의 파일(폴더)가 아니라
  하나의 module처럼 한 파일 안에 작성한다.

  • src/modules/모듈명.js
  • modules/index.js

사용예시

reducer는 export default로 내보냄

export default function reducer( state={}, action={} ){
    switch (액션타입) {
    	// 리듀서 
    	default: return state;
    }
}

action함수는 export로 내보냄

export function createWidget( widget ){
    return { type: CREATE, widget }
}

액션타입을 정의할 때 reducer/ACTION_TYPE 형태로 적음

const CREATE = "widgets/CREATE"

접두사(reducer)를 붙여주는 이유?

• 서로 다른 리듀서에서 액션이름이 중첩되는 것을 방지

---

1. 파일 유형에 따른 폴더 구조

• 단점 : 하나의 기능을 수정할 때, 기능에 관련된 여러 개의 파일을 수정해야 함

2. 기능 중심의 파일 구조

• 장점 : 단일 기능을 작성할 때, 하나의 파일만 다루므로 직관적인 코드 작성