ミドルウェアが必要な場合

応答WebアプリケーションでAPIを使用する場合
→APIリクエストのステータス管理を行う

例

指定要求開始→로딩 중

要求の成功または失敗の指定→로딩 끝났음

成功
レスポンスのステータスの管理

失敗
管理エラーのステータス

리액트 프로젝트 + 리덕스 + 비동기 작업 (위와 같은)管理が必要
→미들웨어効率的な状態管理を提供する

作業環境の準備

簡単な応答項目(冗長性に適用)

を準備する

1.CRA(create-act-app)→新しい反応項目の作成

$ yarn create react-app learn-redux-middleware

2.Ridex→実装カウンタ

新しいプロジェクトに必要なライブラリをインストールする$ yarn add redux react-redux redux-actions

Redoxのハーモニーを用意まず、反放射モジュールを作成します.

コード

            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)→プロバイダとしてコピーを適用

コード

        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.カウンタ素子&カウンタ容器素子

デモ構成部品→アセンブリカタログ
コンテナ構成部品→コンテナディレクトリ

コード#コード#

        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でComputerContainerをレンダリングする

コード

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

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

        export default App;

7.確認操作

$ yarn start

を参照
本『反応の技術』-金民俊