LoginSignup
0
0

More than 1 year has passed since last update.

React + Reduxを基本からまとめてみた【7】【Redux Middleware】

Last updated at Posted at 2021-10-07

Middlewareとは

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

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

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

image.png

なぜ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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0