리덕스 편리하게 이용해보자

리덕스 안그래도 어려운데 작성해야 할 것도 많고 복잡하다!
redux-actions를 사용하면 코드를 더 짧고 깔끔하게 가독성 좋게 바꿀수가 있다

우선 라이브러리 먼저 설치

yarn add redux-actions

설치를 다 했으면 이제 redux-actions를 사용하여 액션생성 함수와 리듀서 함수를 간단하게 바꿔봅시다

기존의 코드

// 액션 타입 정의
// 모듈 이름 / 액션 이름
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

// 액션 생성 함수
// export 해주는거 잊지말긔
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

// 초기 상태값 작성
const initialState = {
  number: 0,
};

// 리듀서 함수 작성
function counter(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        number: state.number + 1,
      };
    case DECREASE:
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
}

export default counter;

그럼 이제 redux-actions를 사용하여 간단하게 바꿔보자

우선 createAction과 handleActions를 redux-actions로 부터 import 해온다
import { createAction, handleActions } from 'redux-actions';
여기서 createAction은 액션생성 함수를 간단히 만들어주는 역할을 하고 handleActions는 리듀서 함수를 더 간단하게 만들어주는 역할을 합니다

원래 액션생성 함수를 만들때 이렇게 만들었었는데 createAction을 사용하면
아래 코드를
export const increase = () => ({type: INCREASE});

이렇게 간단히 바꿀수 있습니다
export const increase = createAction(INCREASE)

이번엔 handleActions를 사용해 리듀서 함수를 간단하게 만들어 볼까요?
기존 코드

function counter(state = initialState, action) {
	switch (action.type) {
      case INCREASE:
        return {
          number: state.number + 1,
        };
      case DECREASE:
        return {
          number: state.number - 1,
        };
      default:
        return state;
    }
}

handleActions를 사용한 코드

const counter = handleActions({
  [INCREASE]: (state, action) => ({ number: state.number + 1 }),
  [DECREASE]: (state, action) => ({ number: state.number - 1}),
  initialState,
})