미들웨어가 필요한 경우

리액트 웹 애플리케이션에서 API 연동 시
→ API 요청에 대한 상태 관리 잘해야

• 예시

  • 요청 시작 → 로딩 중 명시

  • 요청 성공 or 실패 → 로딩 끝났음 명시

    • 성공

      응답에 대한 상태 관리

    • 실패

      에러에 대한 상태 관리
      

리액트 프로젝트 + 리덕스 + 비동기 작업 (위와 같은) 관리 필요 시
→ 미들웨어로 효율적인 상태 관리 가능

작업 환경 준비

• 간단한 리액트 프로젝트 (리덕스 적용) 준비

1. CRA(create-react-app)을 사용 → 새 리액트 프로젝트 생성

$ yarn create react-app learn-redux-middleware

2. 리덕스 사용 → 카운터 구현

1. 필요 라이브러리들을 새 프로젝트에 설치

   $ yarn add redux react-redux redux-actions

2. 리덕스를 위한 코드 준비. 먼저 counter 리덕스 모듈 작성

   • 코드

            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;

3. 루트 리듀서 생성

• 코드

        import { combineReducers } from "redux";
        import counter from "./counter";

        const rootReducer = combineReducers({
          counter,
        });

        export default rootReducer;

4. 스토어 생성 (src/index.js) → Provider로 리덕스 적용

• 코드

        import React from "react";
        import ReactDOM from "react-dom";
        import { createStore } from "redux";
        import { Provider } from "react-redux";*
        import "./index.css";
        import App from "./App";
        import reportWebVitals from "./reportWebVitals";
        import rootReducer from "./modules";

        const store = createStore(rootReducer);

        ReactDOM.render(
          <Provider store={store}>
            <App />
          </Provider>,
          document.getElementById("root")
        );

        reportWebVitals();

5. 카운터 컴포넌트 & 카운터 컨테이너 컴포넌트

• 프레젠테이셔널 컴포넌트 → components 디렉터리

  컨테이너 컴포넌트 → containers 디렉터리

• 코드

        import React from "react";

        const Counter = ({ onIncrease, onDecrease, number }) => {
          return (
            <div>
              <h1>{number}</h1>
              <button onClick={onIncrease}>+1</button>
              <button onClick={onDecrease}>-1</button>
            </div>
          );
        };

        export default Counter;

        import React from "react";
        import { connect } from "react-redux";
        import { increase, decrease } from "../modules/counter";
        import Counter from "../components/Counter";

        const CounterContainer = ({ number, increase, decrease }) => {
          return (
            <Counter number={number} onIncrease={increase} onDecrease={decrease} />
          );
        };

        export default connect(
          (state) => ({
            number: state.counter,
          }),
          {
            increase,
            decrease,
          }
        )(CounterContainer);

6. App.js에서 CounterContainer 렌더링

• 코드

        import React from "react";
        import CounterContainer from "./containers/CounterContainer";

        const App = () => {
          return (
            <div>
              <CounterContainer />
            </div>
          );
        };

        export default App;

7. 작동 확인

$ yarn start

• 참고
  책 '리액트를 다루는 기술' - 김민준