리덕스를 적용한 간단한 리액트 프로젝트를 준비합시다. 이 프로젝트를 통해 리덕스 미들웨어에 대해 알아볼 것입니다.

CRA(create-react-app)를 사용하여 새 리액트 프로젝트를 생성하세요.

$ yarn create react-app learn-redux-middleware

다음으로 리덕스를 사용하여 카운터를 구현합니다. 이에 필요한 라이브러리들을 새 프로젝트에 설치해 주세요.

$ yarn add redux react-redux redux-actions

이제 리덕스를 위한 코드를 준비합니다. 먼저 counter 리덕스 모듈을 작성하세요.

modules/counter.js

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

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

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

const initialState = 0; // 상태는 꼭 객체일 필요가 없습니다. 숫자도 작동해요.

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

export default counter;

---