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

React
師匠
師匠

よし。では、休憩はここまでにして、早速前回の続きを初めていこう。

とんぺい
とんぺい

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

師匠
師匠

前回は、アプリケーションを作成していく中で、上の画像のようなエラーが確認されるところまで進んだね。今回は、

・なぜこのエラーが起きるのか

・どのようにしてエラーを解決するか

の2点を話していくよ

とんぺい
とんぺい

早く答えが知りたいブゥ〜!

エラー原因

jsxの構文は、BabelによってJavaScriptの構文に変換されている

師匠
師匠

エラーの原因について解説する前に、とんぺいくんに質問があるのだが、reduxのAction creatorを作成する際のルールは覚えているかい?

とんぺい
とんぺい

確か

・Action creatorはplainオブジェクトを返さなければいけない。

・actionはtypeを持たなければいけない。

の2つがあった気がするブゥ。

師匠
師匠

そうだね。ではそのルールを踏まえた上で、今回のエラー内容を一緒に見ていこう。エラー表示には、『Actioins must be plain object』書いてあるね。つまり、今回のコーディングの仕方では、Action creatorはplainオブジェクトを返すことができていないということなんだ。

とんぺい
とんぺい

んん?それはどういうことだブゥ?

今回は、ちゃんとreturn { type: "GET_POST_LIST", payload: response };ってplainオブジェクトを返している気がするブゥ。

師匠
師匠

とんぺいくんは、Reactが人間にとって理解しやすい、『jsx』という構文を用いてコーディングをしていて、それをBabelというトランスパイラーがブラウザが理解できるように『JavaScript』に自動的に変換しているということは覚えているかい?

とんぺい
とんぺい

そういえば、昔師匠に教えてもらったような…

すっかり忘れていたブゥ…

師匠
師匠

今回は、jsx上では問題が内容に思えても、Babelによって、JavaScriptに変換された後のコードに問題があったんだ。実際どのような問題があったのか、Babelのサイトでコードをトランスパイルしてみよう。

実際にトランスパイルしてみると…

師匠
師匠

上の画像の右側のコードは、実際にトランスパイルを行なった後のコードになるよ。whileループの中で、まず初めにreturnされているのが_jsonPlaceholder.default.get.("/posts")だというのが確認できるね。

とんぺい
とんぺい

本当だブゥ!

ここで、plainオブジェクトを返していないから、エラーが起こっていたということなんだ!

師匠
師匠

その通り。ではどうすればこのエラーを解決できるのか、ここでredux-thunkというミドルウェアが登場するんだ。エラーの続きを確認すると、『Use custom middleware for async actions.』とも書いてあるね。

とんぺい
とんぺい

確かに、英語でエラーが返ってきたから、読む気が失せちゃったけど、エラー文には、解決方法もちゃんと書いてあるんだブゥね…

実際にどのように使うんだブゥ?

師匠
師匠

それでは、実際にredux-thunkを用いてコーディングを行なっていこう。

解決方法

redux-thunkをインストールする

師匠
師匠

まずは、一旦アプリケーションを中断して、『redux-thunk』をyarnを用いてインストールしよう。

とんぺい
とんぺい

わかったブゥ。

yarn add redux-thunk

できたブゥ!

redux-thunkをアプリケーションに組み込む

師匠
師匠

では、src/index.jsを開いて以下のようにredux-thunkをアプリケーションに組み込もう。変更点としては、reduxから『applyMiddleware』をインポートして、createStore関数にredux-thunkと一緒に渡してあげているというところだね。

とんぺい
とんぺい

うん。

師匠、できたよ!

Action creatorを修正する

師匠
師匠

では次にAction creatorを以下のように修正しよう。

redux-thunkを導入することで、Action creatorはplainオブジェクトのみでなく、関数を返すこともできるようになったよ。

とんぺい
とんぺい

うん。

こっちの修正も無事に完了したブゥ!

師匠
師匠

よし。

それでは、アプリケーションが正常に動作するか、動作確認を行なってみよう。

動作確認結果

師匠
師匠

どうやらうまく動作しているようだね。

このように、redux-thunkをアプリケーションに組み込むことで、action内で非同期処理が可能になるんだ。

とんぺい
とんぺい

ほぅほぅ。

でも、なんでredux-thunkを用いると、非同期処理がうまくいったんだブゥ?

師匠
師匠

そうだね、では次回はredux-thunkを組み込むことで、なぜエラーが解決できたのかということを解説しよう。

とんぺい
とんぺい

またもや続きが気になるブゥ!

次回に備えて、しっかり休憩してくるブゥ。

師匠
師匠

そうだね。完成品のソースコードもpigblogに載せておくので、ぜひ参考にしてくれ。それでは、また次回。

コメント

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