Redux 리팩토링 - action creators, action values, Ducks 패턴

1. Action value

type이름 컨벤션: module명/type
counter/PLUS_ONE
action type을 문자열의 형태를 dispatch나 reducer에 직접 넣는것이 아니라 변수 형태로 관리

 

2. Action Creator

action 객체를 디스패치할 때 action value를 직접 입력하지 않고, (예:dispatch({ type: "MINUS_ONE" });)

만들어진 상수를 이용해 Action Creator가 해당 action values를 return하도록 함.

action을 만드는 생성자인 셈

 

 

(src/redux/modules/counter.js)

⭐: 모듈 만들 때, 만들어야 할 구성요소 리스트업

// ⭐src/redux/modules/counter.js

// ⭐Action Value
// 변하지 않을거라서 상수로 만듦
// App.js의 dispatch도 쓸 수 있게 export해주기
const PLUS_N = 'counter/PLUS_N';

// ⭐Action Creator
// action value를 return하는 함수
export const plusN = (payload) => {
    return {
        type: PLUS_N,
        payload: payload,
    };
};

// ⭐Initial State
// 초기 상태값(state)
const initialState = {
    number: 0,
};

// ⭐Reducer
// 리듀서 : state에 변화를 일으키는 함수
// (1) state를 action의 type에 따라 변경하는 함수

// input : state와 action 이 두가지를 받음
// action 객체라는 것은 action type을 payload만큼 처리하는 것이다!!
// ex: payload가 3이다. 3만큼을 plus해라

// action은 객체 형태로 되어있고 type과 value을 가지고 있음
// state를 어떻게 수정할건지 action에 대해 표현하는게 action 객체
const counter = (state = initialState, action) => {
    switch (action.type) {
        case PLUS_N:
            return {
                number: state.number + action.payload,
            };
...

// ⭐export default reducer
export default counter;

(App.jsx)

...
import { plusN } from './redux/modules/couter';

function App() {
...
<button
                onClick={() => {
                    // dispatch: action객체를 store에 던져주는 역할
                    // 인자로 action객체를 넣어줘야 함
                    // 객체에 type과 payload가 있는데 type만 넣어주자

                    // dispatch({
                    //     type: PLUS_ONE,
                    // });

                    // 리팩토링
                    dispatch(plusN(number));
                }}
            >+</button>
...

---

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 가 모두 존재하는 작성방식