18.1 작업 환경 준비

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

    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;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.