[Redux] 리덕스 사용법 및 예제 (2) (feat.payload, ducks패턴)

 

https://taehyeon-smilestudy.tistory.com/49

[Redux] 리덕스 사용법 및 예제 (1)

 

이어서 Payload 및 Ducks 패턴을 알아보고 적용해 보겠습니다.

Payload란 무엇인가?

이전까지 만든 기능은 리듀서에게 “더해줘" 라고만 말을 했습니다.
하지만 이제 "N만큼 더해줘"라고 N을 같이 리듀서에서 보내야 합니다.
그때 필요한 것이 Payload입니다.

action 객체라는 것은 action type를 payload만큼 처리하는 것입니다.
ex) payload가 3이면 3만큼 action을 해줘

 

Payload 를 이용한 기능 만들기

이번에는 사용자가 input에 입력한 숫자를 더하고 빼는 기능을 payload를 사용해서 만들어 보겠습니다.

 

1. 기존에 했던 App.jsx에 input을 추가하고 useState를 이용하여 input에 있는 value를 연결시켜 줍니다.

//App.jsx

const [number, setNumber] = useState(0);

<input
        type="number"
        value={number}
        onChange={(e) => setNumber(+e.target.value)}  //+는 문자열을 숫자로 바꿔준다.
      />

 

2. conunter.jsx에 Action value, Action creator, Reducer를 추가해 줍니다.

//counter.jsx

//Action Value
const ADD_NUM = "ADD_NUM";
const SUB_NUM = "SUB_NUM";

//Action Creator
export const addNum = (payload) => {
  return {
    type: ADD_NUM,
    payload,
  };
};

export const subNum = (payload) => {
  return {
    type: SUB_NUM,
    payload,
  };
};

//Reducer
const counter = (state = initialState, action: CounterActionTypes) => {
  switch (action.type) {
    case PLUS_ONE:
      return {
        number: state.number + 1,
      };
    case MINUS_ONE: 
      return {
        number: state.number - 1,
      };
    case ADD_NUM:
      return {
        number: state.number + action.payload, //기존 number에 payload를 더해줍니다.
      };
    case SUB_NUM:
      return {
        number: state.number - action.payload, //기존 number에 payload를 빼줍니다.
      };
    default:
      return state;
  }
};

 

payload가 필요한 Action Creator에서는 함수를 선언할 때 매개변수 자리에 payload를 넣어줘야 합니다.
Action Creator를 사용하는 컴포넌트에서 리듀서로 보내고자 하는 payload를 인자로 넣어줘야 하기 때문입니다.

 

❓ 꼭 payload라는 이름으로만 보내야 되나요?

type 프로퍼티는 공식문서에서 꼭 명시하여야 된다고 나와있지만 payload는 사용자 마음대로 이름을 지어서 사용해도 됩니다.

{type: "ADD_NUM", num: 10} 
{type: "ADD_NUM", number: 10} 
{type: "ADD_NUM", data: 10} 
{type: "ADD_NUM", myNumber: 10} 
{type: "ADD_NUM", myNum: 10} 


{type: "ADD_NUM", payload: 10}
// 아무거나 상관없어요!

 

 

3. App.jsx에 있는 button과 dispatch로 연결시킵니다.

//App.jsx

<button
        onClick={() => {
          dispatch(addNum(number)); //Action creator를 가져옴
        }}
      >

// addNum의 인수에는 input에 연결 된 number를 가져옴

 

결과물

 

 

---

 

 

 

Ducks 패턴이란?

리덕스 모듈을 개발하는 개발자마다 구성요소들을 제 각각 구현하면 다른 개발자와 협업을 해야 하는 상황에 놓였을 때 수많은 파일 중에 내가 필요로 하는 구성요소를 찾는것이 어렵기 때문에 Erik Rasmussn이라는 개발자가 이것을 패턴화하여 작성하는 것을 제안했는데, 그것이 바로 Ducks패턴입니다. 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 패턴을 토대로 작성한 코드입니다.

 

다음은 redux의 Toolkit에 대해서 알아보겠습니다!