Redux_Ducks 패턴 부연설명

Rock Kyun·2023년 11월 10일

오늘 했던 것

개인 과제 (투두리스트 고도화, 팬레터 페이지)

[ 이번 내용은 이전 포스트인 Redux의 부연 설명입니다. ]

1. Ducks 패턴_Action Value

아래의 코드를 보면 switch문 의 case의 action.type을
문자열로 "ADD_COUNT" 라고 하드코딩 해놓은 것을 볼 수 있다.

<counter.js>

// 초기 상태값 (state 같은 것)
const initialState = {
  number: 0,
};

// counter 리듀서 (state 변경 함수 같은 것)
const counter = (state = initialState, action) => {
  switch (action.type) { // switch문을 통해 type에 따라 작동할 코드를 설정
    case "ADD_COUNT":
      return { number: state.number + 1 } // initialState의 값을 업데이트
    default:
      return state;
  }
};

// export default 한다.
export default counter;

그렇다면 reducer를 사용해서 action을 전송할 때마다
아래와 같이 "ADD_COUNT" 라는 타입을 매번 하드코딩 해야하는데

const addCount = () => {
  dispatch({type:"ADD_COUNT"}}); // {type: "ADD_COUNT"} 이거를 매번 써야 됨.
}

만약 사용하는 곳이 100군데인데
reducer의 타입명을 바꾸자는 제안이 들어왔다면..?
module에서 수정 한번 하고,
100군데를 다 찾아가서 문자열을 수정해줘야 하는 것이다😨

그런 상황을 막기 위해 Ducks 패턴의
Action Value, Action Creator 가 있는 것이다!

Action value

module에서 1차적으로 하드 코딩을 막는 수단
상단에 action.type을 미리 변수에 할당해두는 것이다.
그렇게 되면 일단 module의 유지 보수는 문제가 없어진다.
type을 바꾸고 싶다면 상단에 있는 변수만 수정하면 되기 때문에!

<counter.js>
////////////////
// ACTION VALUE
////////////////
const ADD_COUNT = "ADD_COUNT"
  

const initialState = {
  number: 0,
};


// counter 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) { // switch문을 통해 type에 따라 작동할 코드를 설정
    case ADD_COUNT:
      return { number: state.number + 1 } 
    default:
      return state;
  }
};

export default counter;

Action creator

그렇다면 Action value 를 필요한 컴포트넌트마다
import 해서 써야하는 것이냐? 싶을 수 있겠지만,
module 밖의 일은 Action creator 가 담당한다.
module 밖에서 작동하며
return {type:ADD_COUNT} 하도록 하는 것이 Action creator 다.

<counter.js>
// ACTION VALUE
const ADD_COUNT = "ADD_COUNT"

//////////////////
// ACTION CREATOR
//////////////////
export const addCount = () => {
  return {type: ADD_COUNT}
}

const initialState = {
  number: 0,
};

// counter 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) { // switch문을 통해 type에 따라 작동할 코드를 설정
    case ADD_COUNT:
      return { number: state.number + 1 }
    default:
      return state;
  }
};

export default counter;

사용법

사용하고자 하는 컴포넌트에서
action creator 를 import 한다.
dispatch를 사용하여 action creator 함수를 호출.
action creator가 작동하며
dispatch는 return 된 {type:ADD_COUNT} 를
reducer에 전달

// module에서 Action creator import
import { addCount } from "./redux/modules/counter";
import { useDispatch, useSelector } from "react-redux";

function App() {
  const counter = useSelector((state) => state.counter);
  const user = useSelector((state) => state.user);

  const dispatch = useDispatch();
  
  const plusCount = () => {
    // Action Creator가 작동하며
    // dispatch는 return 된 {type:ADD_COUNT} 를 reducer에 전달
    dispatch(addCount()); 
  };