Redux - Ducks 패턴

[학습 목표]
Ducks 패턴에 대해 이해할 수 있습니다.

1. Ducks 패턴

(1) Ducks 패턴이란?

리덕스를 배워보니 어떠신가요?

리덕스를 사용하기 위해서는 결국 우리가 리덕스의 구성요소를 모두 만들어야만 사용이 가능합니다. 근데 만약 리덕스 모듈을 개발하는 개발자마다 구성요소들을 제 각각 구현하면 어떨까요? 그리고 내가 그 개발자와 협업을 해야 하는 상황에 놓였을 때 수많은 파일 중에 내가 필요로 하는 구성요소를 찾는것이 쉬울까요?

그래서 Erik Rasmussn 라는 개발자가 이것을 패턴화하여 작성하는 것을 제안했는데, 그것이 바로 Ducks패턴입니다. Ducks 라는 이름은 리덕스의 덕스 라고 하네요. 심볼은 오리 입니다. 🐤 

📌 [Erik Rasmussn의 Ducks 제안](https://github.com/erikras/ducks-modular-redux)

(2) Duck 패턴으로 작성하기

이 자료를 보고있는 수강생들에게 별도의 안내는 하지 않았지만, 사실 우리는 이미 Ducks 패턴으로 코드를 작성하고 있었습니다.

**Erik Rasmussen 이 제안한 Ducks 패턴은 아래의 내용을 지켜 모듈을 작성하는 것 입니다.**

1. Reducer 함수를 export default 한다.

2. Action creator 함수들을 export 한다.

3. Action type은 app/reducer/ACTION_TYPE 형태로 작성한다.

(외부 라이브러리로서 사용될 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE 로만 작성해도 괜찮다.)

그래서 모듈 파일 1개에 Action Type, Action Creator, Reducer 가 모두 존재하는 작성방식입니다.

어떤가요? “지금까지 왜 이렇게 작성을 하라고 했을까?” 라고 생각하셨던 수강생분들은 의문이 조금 풀리셨길 바랍니다. 그래서 앞으로 우리는 모든 리덕스 모듈을 Ducks 패턴으로 작성하도록 하겠습니다.

2. 정리

• 리듀서로 보내는 액션객체에 어떤 정보를 같이 담아보내고자 한다면 payload를 이용한다.
• payload는 Action Creator를 생성할 때 매개변수에 자리에서 받을 준비를 하고, 반환하는 액션객체에 payload라는 key와 받은 매개변수를 value로 하여 구현한다.
• 리듀서에서 payload를 사용하고자 할 때는 action.payload로 사용할 수 있다.
• ES6에서 객체를 생성할 때 key와 value가 같으면 축약해서 작성할 수 있다.
• Ducks 패턴은 Erik Rasmussen 이 제안했고, 현재 리덕스 모듈 작성방법의 정석으로 여겨지고 있다.