redux-thunkを用いて非同期処理を行う Part3

React
とんぺい
とんぺい

師匠!こんにちは!

redux-thunkの続きを聞きにきたよ〜!

師匠
師匠

とんぺいくん。こんにちは。

前回は、Action creatorのエラーをredux-thunkを用いて解決するところまで解説したね。今回はredux-thunkを組み込むことでなぜエラーが解決したのか、図を用いて説明しよう。

とんぺい
とんぺい

よろしくお願いしますだブゥ!

redux-thunkが組み込まれたデータフロー

師匠
師匠

redux-thunkは上の図に示すように、dispatchとReducersの間に位置するミドルウェアだよ。ここにredux-thunkが組み込まれることによって、今回のエラーは解決されたんだ。

とんぺい
とんぺい

ほぅほぅ。具体的にredux-thunkの中では何をやっているんだブゥ?

師匠
師匠

うん。いい質問だね。

では、早速redux-thunkの中身を見ていこう。

redux-thunkの中身を覗いてみる

師匠
師匠

上の図がredux-thunkのロジックの一例を表した図になるよ。

redux-thunkでは渡されるものが関数ならば、その関数を実行して新たにactionを生成し、渡されるものが関数でなかったら、Reducersにデータを流すといったロジックが組まれているんだ。

とんぺい
とんぺい

へぇ〜。なんだか聞いた限りでは、そんな難しいロジックではないような気がするブゥ!

師匠
師匠

そうだね。特別難しいことをしているわけではないんだ。redux-thunkは以下に示す通りに、実質的なロジックの部分は6行ほどで終わっているんだよ。

とんぺい
とんぺい

本当だブゥ!なんか勝手にすごく難しそうなコードかと思ってたら、こんなに短く書かれていたんだブゥね!

師匠
師匠

記述内容に無駄がなく、良いコードのお手本だね。

とんぺいくんもいつか、このような多くの人に使ってもらえるような便利なものを作れるようになろう。

とんぺい
とんぺい

うん。

これからもっと勉強を頑張って、良いサービスやモジュールを作れるようになるブゥ!

師匠
師匠

良い心意気だ。では最後に、redux-thunkのまとめをして終わりにしよう。

まとめ

  • redux-thunkはAction creator内で『非同期処理』を実現させるためのミドルウェアである
  • redux-thunkを用いることで、Action creatorはオブジェクトの他に、関数をreturnすることができる
  • redux-thunkではactionが関数の場合、その関数を実行して再度新しいactionを作成する
  • redux-thunkではactionが関数でない場合、そのままReducersにデータを渡す

コメント

タイトルとURLをコピーしました