入門はredux-thunkとredux-sagaを理解します


**
タイトルに示すように、次にreduxのミドルウェアについてお話しします
**では、ミドルウェアは何ですか.まずreduxのactionとstoreの間にdispatchという方法で橋梁を構築していることを説明します.では、中間部品はこの橋梁で仕事をしなければなりません.つまり、dispatchのパッケージです.どうしてここにいるの?すべてのユーザー操作が開始したactionはdispatchを通じてstoreに着くことができ、千軍万馬が独木橋を渡ることに相当するので、私はこの橋の上でモニタ(redux-loggerなど)をすれば、私はすべてのaction命令を印刷することができます.
さらに次のミドルウェアの前にapplyMiddlewareというものを理解しておきましょう.実はapplyMiddlewareはReduxの原生的な方法で、すべてのミドルウェアを配列にして、順番に実行します.ミドルウェアが多くなるとパラメータとして順次転送できます
1、redux-thunk
先にコードを貼り付けます.
import {
	createStore,
	applyMiddleware
} from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

上のコードはthunkミドルウェアをインポートする方法ですが、thunkはどのような役割を果たしていますか?他に私は知りません.彼の最も重要な役割は、actionオブジェクトを返す方法をaction単独のファイルに分離することです.thunkでは、方法はdispatchからstoreに直接送信することができますが、storeはTaがactionオブジェクトではないと判断し、この方法を実行してこのactionオブジェクトを得て、storeはこのオブジェクトを受信します.先ほど、次のreduxプロセスを実行しました.gitアドレス:[https://github.com/reduxjs/redux-thunk]簡単に理解できる
2、redux-saga
先にコードを貼り付けます.
import {
	createStore,
	applyMiddleware
} from 'redux';
import SagaJs from './saga.js';  // SagaJs       
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  reducers, 
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(SagaJs)

上記はsagaミドルウェアのインポート方法であり、thunkとは多くの違いがあります.例えば、SagaJsは何に使いますか?SagaMiddlewareとは何ですか?このSageJsはactionの複雑な操作を処理するために分離されたファイルであり、ファイル内に作成された関数もGeneratorsオブジェクトであり、function*方式で関数を作成します.createSagaMiddlewareはsagaミドルウェアを作成する方法であり、sagaMiddlewareはTaが作成したミドルウェアであり、sagaMiddleware.run(SagaJs)でsagaファイルを実行して処理後のactionオブジェクトをstoreに返す.redux-sagaはactionオブジェクトを返すより複雑なプロジェクトに適しており、Taには独自のAPIがたくさんあり、SagaJsファイルの開発を支援しています.gitアドレス:[https://github.com/redux-saga/redux-saga]簡単に理解できる
この文章は私自身の理解だけを述べて、多くの不適切なところがあって、読者は他のルートを通じて理解することができます.