[TIL] 24_0201 Redux Ducks Pattern

Ducks Pattern

리덕스를 사용하기 위해선 리덕스의 구성요소들을 모두 만들어야 사용이 가능해.

이건 개발자 마다 다를 수 있어. 그래서 협업하면 중구난방일 경우가 상당히 높은데

Erik Rasmussn 라는 분이 통일시키기 위해 패턴화를 시켜줬어. 그게 ducks pattern이야.

덕스 패턴은 이미 쓰고 있어.

 

이전에 했던 모듈 파일 1개에 Action Type, Action Creator, Reducer가 모두 존재하는 작성방식이야.

1. Reducer 함수를 `export default` 해.
2. Action creator 함수들을 export 하고
3. Action type은 app/reducer/ACTION_TYPE 형태로 작성해.

 

// counter.js

// action value
const PLUS_ONE = "plus_one";
const MINUS_ONE = "minus_one";
const PLUS_N = "plus_n";

// action creator : action value를 return하는 함수
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

export const minusOne = () => {
  return {
    type: MINUS_ONE,
  };
};

export const plusN = (payload) => {
  return {
    type: PLUS_N,
    payload: payload, // 3
  };
};

// 초기 상태값(state)

const initialState = {
  number: 0,
};



const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE:
      return {
        number: state.number + 1,
      };
    case MINUS_ONE:
      return {
        number: state.number - 1,
      };
    case PLUS_N:
      return {
        //number는 원래 있었던 state의 number에 action.payload라는 값을 더해서 리턴해줄거야라는 의미야.
        number: state.number + action.payload,
      };
    default:
      return state;
  }
};

export default counter;

=> 모듈 파일 1개에 Action Type, Action Creator, Reducer가 모두 존재하는 작성방식이야.

 

느낀점

- 사용할 때 뭐부터 해야하지라는 생각이 필요없어서 좋은 것 같아. value, creator 변수지정하고 함수만들고 , 초기화형태 만들어줘서 해당 내용 가지고 리듀서에서 지지고 볶고 제어하기. 순서대로 쓰기 좋게 잘 해놓은 패턴이야.