지금부터는 redux-actions의 주요 API들을 하나씩 살펴보도록 하겠습니다.

9.3.1 createAction(s)

먼저 createAction과 createActions 입니다.

export const increase = createAction('INCREASE');
export const decrease = createAction('DECREASE');

increase();          // { type: 'INCREASE' }
decrease();          // { type: 'DECREASE' }
increase(10);        // { type: 'INCREASE', payload: 10 }
decrease([10, 20]);  // { type: 'DECREASE', payload: [10, 20] }

먼저 하나의 Action Creator를 만들어 주는 createAction() 예시 코드입니다.

위 코드에서 볼 수 있듯이, 함수의 파라미터로는 Action Type을 넣어주면 됩니다.
그러면 해당되는 Action Type을 가진 Action Creator를 만들어서 리턴하게 됩니다.

그리고 실제로 Action 객체를 만들 때는 이렇게 만들어진 Action Creator 함수를 호출하면 됩니다.
그러면 오른쪽 주석에 써진 것과 같은 형태의 Action 객체가 생성됩니다.

다음은 여러 개의 Action Creator를 한 번에 만들 수 있게 해주는 createActions() 예시 코드입니다.

const { increase, decrease } = createActions({
    INCREASE: (amount) => {
        return { amount };
    },
    DECREASE: (amount) => {
        return { amount };
    },
});

createActions()의 경우에는 actionMap이라고 부르는 객체를 파라미터로 받게 되는데, 이 actionMap의 key는 Action Type이 되고, value는 payload creator라고 불리는 함수가 들어가게 됩니다.

Payload creator 함수는 이름 그대로 파라미터를 받아서 Action객체에 함께 실려보낼 payload 객체를 만들어주는 함수라고 보시면 됩니다.

이렇게 호출된 createActions() 함수는 Action Creator들이 들어있는 객체를 리턴하게 됩니다.

결론적으로, 이렇게 createAction()과 createActions() 함수를 사용해서 만들어진 Action Creator를 호출하면 Flux Standard Action의 규칙을 준수하는 Action 객체들이 만들어지게 되는 것입니다.

createAction()과 createActions() 함수의 추가적인 파라미터로는 payload creator이외에도 meta creator 등의 파라미터가 있는데, 그 부분은 여기서 자세히 다루지는 않도록 하겠습니다.
혹시 궁금한 분들은 아래 링크에 들어가면 더 자세한 API 설명을 볼 수 있으니 참고하기 바랍니다.

https://redux-actions.js.org/api/createaction

9.3.2 handleAction(s)

다음은 handleAction과 handleActions입니다.

handleAction은 이름 그대로 Action을 핸들링 하기 위한 함수입니다.
Action을 핸들링 한다는 것은 Action을 처리한다는 뜻이죠.
결국 handleAction() 함수가 하는 역할은 Reducer를 생성하는 것입니다.

하나의 Action에 대해 Reducer를 생성하는 handleAction() 함수와 여러 개의 Action에 대해 Reducer를 생성하는 handleActions() 함수가 있습니다.

바로 예시 코드를 한 번 보도록 하겠습니다.

const reducer = handleAction(
    'INCREASE',
    (state, action) => {
        return {
            count: state.count + action.payload.amount
        }
    },
    { count: 0 }  // defaultState
);

이 코드는 하나의 Action에 대한 Reducer를 만들어 주는 handleAction() 예시 코드입니다.
여기에서는 INCREASE라는 하나의 Action Type에 대한 Reducer를 생성해서 리턴하고 있습니다.

첫 번째 파라미터로는 Action Type이 들어가고, 두 번째 파라미터로 실제로 Action을 처리하기 위한 Reducer 함수가 들어갑니다.
그리고 세 번째 파라미터로 초깃값을 나타내는 defaultState가 들어가게 됩니다.

이렇게 해서 handleAction() 함수를 호출하면 해당 Action Type을 처리하는 reducer 함수를 리턴하게 됩니다.

여기서 두 번째 파라미터로 들어간 reducer는 엄밀히 말하면 reducer라기 보다는 Action Type에 관계없이 state에 어떤 변화를 주는 단순한 함수인데, 이 함수를 특정 Action Type에 mapping시킨 실제 reducer를 만들어 주는 것이 바로 handleAction() 함수입니다.

다음은 여러 개의 Action에 대한 Reducer를 만들어 주는 handleActions() 예시 코드입니다.

const reducer = handleActions(
    {
        INCREASE: (state, action) => {
            return {
                count: state.count + action.payload.amount
            };
        },
        DECREASE: (state, action) => {            
            return {
                count: state.count + action.payload.amount
            };
        },
    },
    { count: 0 }  // defaultState
);

handleActions() 함수의 첫 번째 파라미터로는 reducerMap이 들어가게 되는데,
이 reducerMap의 key는 Action Type이고, value는 reducer 함수가 됩니다.

그리고 두 번째 파라미터로는 초깃값을 나타내는 defaultState가 들어가게 됩니다.

이렇게 해서 handleActions() 함수를 호출하게 되면, reducerMap에 있는 Action들을 모두 처리할 수 있는 reducer 함수를 리턴합니다.
그리고 우리는 이 reducer를 Redux Store에 넣어서 사용할 수 있는 것이죠.

여기에서는 handleAction()과 handleActions() 함수의 기본적인 사용 방법에 대해서만 다뤘습니다.
추가로 더 자세한 내용이 궁금한 분들은 아래 링크에 들어가면 더 자세한 API 설명을 볼 수 있으니 참고하기 바랍니다.

https://redux-actions.js.org/api/handleaction

9.3.3 combineActions

마지막으로 나오는 redux-actions의 API는 combineActions입니다.

combineActions() 함수는 이름의 가진 의미 그대로 Action Type 또는 Action Creator들을 하나로 합쳐주는 함수입니다.
combineActions() 함수의 파라미터로는 합칠 Action Type 또는 Action Creator들을 넣어주면 됩니다.

그래서 앞에서 createAction() 또는 createActions() 함수를 사용해서 만들어진 Action Creator들을 combineActions() 함수의 파라미터로 넣어서 사용할 수도 있습니다.

그럼 combineActions() 함수를 사용하는 실제 예시 코드를 한 번 볼까요?

const reducer = handleActions(
    {
        [combineActions('INCREASE', 'DECREASE')]: (state, action) => {
            return {
                count: state.count + action.payload.amount
            };
        },
    },
    { count: 0 }  // defaultState
);

이 코드는 앞에서 나온 handleActions() 함수의 예시 코드를 combineActions()를 사용하도록 변경해본 코드입니다.

이 코드를 보면 원래 두 개로 나눠져 있던 INCREASE와 DECREASE Action Type을 하나로 합쳐서 동일하게 상태의 변화를 주도록 해주었습니다.
이처럼 combineActions() 함수는 여러 개의 Action Type 또는 Action Creator들을 합칠 때 사용한다고 이해하면 됩니다.

combineActions()에 대해 더 자세한 내용이 궁금한 분들은 아래 링크에 들어가면 더 자세한 API 설명을 볼 수 있으니 참고하기 바랍니다.

https://redux-actions.js.org/api/combineactions

---

자, 지금까지 배운 redux-actions의 API들을 모두 사용한 예시 코드를 보면서, redux-actions를 적용하는 전체 과정을 한 번 정리해보도록 하겠습니다.

import { createActions, handleActions, combineActions } from 'redux-actions';

const defaultState = { count: 0 };

const { increase, decrease } = createActions({
    INCREASE: (amount) => {
        return { amount };
    },
    DECREASE: (amount) => {
        return { amount };
    },
});

const reducer = handleActions(
    {
        [combineActions(increase, decrease)]: (state, action) => {
            return {
                count: state.count + action.payload.amount
            };
        }
    },
    defaultState
);

export default reducer;

먼저 제일 위쪽에서는 필요한 함수들을 redux-actions패키지로부터 import 해옵니다.
그리고 다음으로 defaultState를 선언하고 있습니다. 초기 state가 되는 것이죠.

다음으로는 createActions() 함수를 사용해서 필요한 Action Creator들을 모두 만듭니다.
여기에서는 increase, decrease 이렇게 두 가지 Action Type에 대한 Action Creator들을 만들었습니다.

그리고 마지막으로 handleActions() 함수와 combineActions() 함수를 사용해서 increase와 decrease Action을 처리할 수 있는 reducer를 만들게 됩니다.

이렇게 만들어진 reducer를 default export하여 외부에서 가져다 쓸 수 있게 하고 있는데, 이걸 실제 Redux Store에 넣어주기만 하면 우리는 쉽게 Flux Standard Action을 잘 지키면서 Redux를 사용할 수 있게 되는 것입니다.