Middlewareとは

『Middleware』は、ActionをdispatchしてからreducerにActionを引き渡すまでの媒介の役割を果たす。全てのdispatchを聞き取り、Actionの詳細や現在の状態を把握してコードを実行する。複数のMiddlewareを組み合わせて新しい機能を追加することも可能で、それぞれMiddlewareが前後の状況を理解する必要はない。

『Middleware』の例としては、非同期リクエストの処理（サーバーへのHTTPコールなど）、ロギング、ルーティングなどがある。

『Middleware』は、主にアプリケーション内の非同期Actionを処理するために使用でき、Reduxでは、副作用や非同期Actionを可能にするミドルウェアライブラリとして、Redux-thunkやRedux-Sagaが有名。

なぜReactのMiddlewareが必要なのか

Reduxが同期型である一方で、Reduxが非同期操作でどのように動作するのか疑問に思うかもしれない。Redux Middlewareがその答えで、基本的なReduxStoreがあれば、それは同期的な更新のみを行うことができる。Redux Middlewareは、storeの機能を拡張するのに適したツールで、Redux Middlewareは、reducerの前にdispatchされたアクションと対話するための媒体として機能する。

高次関数を使ってReactでカスタマイズしたMiddlewareを作ることができる。また、Reduxの複数のMiddlewareは、組み合わせることができる。このようにして、新しい機能を追加することができる。ただし、reactのMiddlewareはどれも、前後の知識を必要としない。一言で言えば、reactのMiddlewareはdispatchされたActionとreducerの間に入る。

ReduxのMiddlewareはapplyMiddlewareというAPIにアクセスでき、これにより、reactのカスタムミドルウェアだけでなく、redux-thunkやredux promiseのようなMiddlewareも利用できるようになる。

参考サイト

[Redux Middleware: A Perfect Beginner’s Guide]
(https://www.cronj.com/blog/redux-middleware-a-perfect-beginners-guide/)