この記事では、Reduxで非同期処理を行わせるためのミドルウェアRedux-Thunkについてまとめています。私はRedux-Thunkについて初めて学んだとき、仕組みなどがよくわかりませんでした。この記事が私と同じような境遇の方の手助けとなるようであれば幸いです。なお、Reduxに関してはこちらの記事にまとめていますので、合わせて参考にしてみてください。
Redux-Thunkとは、ReduxのAction Creatorに非同期処理を実装するためのミドルウェアです。
Reduxにおける最も一般的なミドルウェアの使い方は非同期Actionの処理です。
Reduxでは基本的に、Action Creatorによって生成されたActionをStoreにディスパッチすることで単純な同期更新を行っています。そこにRedux-Thunkのようなミドルウェアを導入することでStoreの機能を拡張し、非同期ロジックを記述できるようにできます。
通常Action CreatorはActionオブジェクトを返しますが、Redux-Thunkを使用すると**「Thunk」という関数を返すことができる**ようになります。これによってActionのディスパッチを遅らせたり、特定の条件が満たされた場合のみディスパッチできるようになります。
Action CreatorがThunkを返すことで、Action CreatorやAction、ReactのComponentに直接的な副作用を引き起こさないようにすることができます。ピュアでない部分はThunkが含んでおり、ミドルウェアがThunkを呼び出して処理を行うことで、アプリケーションの他の部分は比較的ピュアなままにすることができます。このようにすることで、テスト、保守、拡張性、再利用性を維持することができます。