ReactJS - redux-actions를 이용한 더 쉬운 액션 관리

redux-actions를 이용한 더 쉬운 액션 관리

redux-actions 패키지에는 리덕스 액션들을 관리할 때 유용한 createAction과 handleActions 함수가 있다.

이 함수들은 다음과 같이 yarn으로 설치한다.

yarn add redux-acitons

이렇게 불러와 사용 할 수 있다.

import {createAction, handleActions } from 'redux-actions';

각 함수의 용도와 사용법

createAction을 이용한 액션 생성 자동화 

리덕스에서 액션을 만들다 보면 모든 액션에게 일일이 액션 생성자를 만드는 것이 번거로울 수 있다.

export const increment = (index) => ({
    type: types.INCREMENT,
    index
});
 
export const decrement = (index) => ({
    type: types.DECREMENT,
    index
});

그냥 파라미터로 전달받은 값을 객체 안에 넣는 것뿐인데,

이를 좀더 편하게 자동화하는 방법이 있지 않을까?

createAction을 사용하면 이 작업을 다음과 같이 편하게 자동화 할 수 있다.

increment(3);
/*
결과 :
{
    type: 'INCREMENT'
    patload:3
}
*/

전달받은 파라미터가 여러 개일 때는 이전에 setColor액션 생성 함수를 사용할 때처럼 객체를 만들어서 파라미터에 넣어 주면 된다.

액션을 만들면 파라미터로 전달한 객체를 payload로 설정한다.

export const setColor = createAction(types.SET_COLOR);
 
setColor({index: 5, color:'#fff'})
/*
결과 :
{
    type: 'SET_COLOR'
    payload: {
        index:5,
        color:'#fff'
    }
}
*/

액션이 갖고 있을 수 있는 정보의 이름을 payload값으로 통일함으로써 액션 생성 함수를 한 줄짜리 코드로 작성했다.

어떤 파라미터를 받는지 명시하지 않았기 때문에 헷갈릴 수도 있다!

다음과 같이 createAction의 두 번째 파라미터에 payload  생성 함수를 전달하여 코드상으로 명시해 줄 수도 있다.

export const setColor = createAction(types.SET_COLOR, ({index,color}) => ({index,color}) );

- switch 문 대신 handleActions 사용하기

리듀서에 switch문을 사용하여 액션 type에 따라 다른 작업을 하도록 했다. 

이 방식에는 중요한 결점이 있는데

바로 scope를 리듀서 함수로 설정했다는 것이다.

그렇기 때문에 서로 다른 case에서 let이나 const를 사용하여 변수를 선언하려고 할때 

같은 이름이 중첩되어 있으면 문법 검사를 하면서 오류가 발생한다.

const reducer = handleActions({
  INCREMENT: (state, action) => ({
    counter: state.counter + action.payload
  }),
 
  DECREMENT: (state, action) => ({
    counter: state.counter - action.payload
  })
}, { counter: 0 });

첫 번째 파라미터로는 액션에 따라 실행할 함수들을 가진 객체를 넣어주고,

두 번째 파라미터로는 상태의 기본 값( initialState )을 넣어준다.