🌐Redux 3 - Action Creators, Payload, Ducks 패턴

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)

학습주제 : Redux

학습내용 : 리덕스 action creators, action values, payload, Ducks 패턴

학습일 : 2024. 6. 5.(수)

---

배운 내용 요약

1. Action Creators, Action Values

- 참고: https://joymet33.tistory.com/65

 

2. Payload 

1) Payload 란?

• 액션객체에 같이 담아 보내는 것
  (예: "N을 더해" 라고 할 때 N(=payload)을 액션객체에 담아 리듀서에게 전달)
• 반드시 payload 란 이름을 쓸 필요는 없음

{type: "ADD_NUMBER", num: 10} // ??
{type: "ADD_NUMBER", number: 10} // ??
{type: "ADD_NUMBER", data: 10} // ??
{type: "ADD_NUMBER", myNumber: 10} // ??
{type: "ADD_NUMBER", myNum: 10} // ??


{type: "ADD_NUMBER", payload: 10}

 

2) payload를 이용하여 기능 구현하기

(1) 사용자가 입력한 값을 받을 input 구현하기

// src/App.js
// 중략...
 return (
    <div>
      {number} <br />
      <input
        type="number"
        value={count}
        onChange={(e) => setCount(+e.target.value)}
        // '+'역할: State count의 형 변환(string>>number)을 강제로 시킴 ('+'없으면 count가 string으로 인식)
      />
      <button onClick={() => dispatch(addNumber(count))}>더하기</button>{" "}
      <button onClick={() => dispatch(removeNumber(count))}>빼기</button>{" "}
    </div>
  );

 

(2) counter.js 모듈 작성: Initial State, Action Creator , Reducer, 내보내기(export default)

const initialState = {
  number: 0,
};

// action values
const ADD_NUMBER = "ADD_NUMBER";
const REMOVE_NUMBER = "REMOVE_NUMBER";

// action creators
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload: payload, // 인자로 들어오는 payload를 객체로 받는다
  };
};

export const removeNumber = (payload) => {
  return {
    type: REMOVE_NUMBER,
    payload: payload, // (addNumber와 동일) 인자로 들어오는 payload를 객체로 받는다
  };
};

//리듀서 counter
const counter = (state = initialState, action) => {
  console.log("state >> ", state);
  console.log("action >> ", action);
  switch (action.type) {
    // 액션타입이 "ADD_NUMBER" 일 때 state 변화
    case ADD_NUMBER:
      return {
        //기존 state에 있던 number에 +1을 더한다.
        number: state.number + action.payload,
      };
    case REMOVE_NUMBER:
      return {
        //기존 state에 있던 number에 -1을 뺀다.
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

export default counter;

 

 

 

3. Ducks 패턴

1) Ducks 패턴이란?

• Redux 앱을 구성할 때 사용하는 방법론 중 하나
• 일반적으로 분산되어 있던 액션 타입, 액션 생성자, 리듀서를 "하나의 파일로 구성하는 방식"
• (가벼운 내용) Ducks 라는 이름은 리덕스의 '덕스' 이고 심볼은 '오리' 🦆
• (가벼운 내용) Erik Rasmussn의 Ducks 제안 : https://github.com/erikras/ducks-modular-redux

2) Ducks 패턴 살펴보기

• Reducer 함수를 export default 한다.
• Action creator 함수들을 export 한다.
• Action type은 app/reducer/ACTION_TYPE 형태로 작성한다.
  (외부 라이브러리로서 사용될 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE 로만 작성해도 괜찮다.)