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

飛行機が並列に飛んでいる。 React
とんぺい
とんぺい

タイピングもある程度マスターしたことだし、早速プログラミングの勉強に戻るぞ〜!

師匠こんにちは〜!!

師匠
師匠

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

それでは今日もReactの勉強を進めていこう。

前回はReduxの基礎について勉強したね。

とんぺい
とんぺい

うん。しっかり前回の復習もやってきたし、Reduxを用いたReactのアプリケーション開発の基本は完璧だブゥ!

師匠
師匠

さすがとんぺいくんだ。

それでは今日はReduxの中で非同期処理を行うための、redux-thunkというミドルウェアについて簡単なアプリケーションを作成しながら勉強しよう。

とんぺい
とんぺい

わかったブゥ。

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

作成するアプリケーション

Image from Gyazo
師匠
師匠

今回はおなじみのJSONPlaceholderからポスト一覧を非同期処理で取得するアプリケーションをreduxを用いて作成してみよう。

とんぺい
とんぺい

ふんふん。

特に目新しいことがないんだけど、このアプリケーション作成から何が学べるんだブゥ?

師匠
師匠

今回はこのアプリケーション作成を通して、Reduxの中でどのように、非同期処理を実現するのかということを勉強するよ。

とんぺい
とんぺい

確かに、前回のReduxの基礎では外部とHTTP通信をして、データを非同期に取得することはやってなかったブゥね。

今回も楽しみブゥ!

師匠
師匠

では今回のアプリケーションのディレクトリ構成と必要なパッケージを紹介するよ。

ディレクトリ構成&必要なパッケージ

師匠
師匠

ディレクトリ構成と必要なパッケージは上に示した通りだよ。今回は外部とのHTTP通信を行うのでaxiosを追加するのを忘れないで欲しい。

Githubにも今回のソースコードを載せているので、そちらも確認してくれ。

とんぺい
とんぺい

わかったブゥ!

準備はいつも通りに行なって…

うん。必要なファイルとパッケージを揃えたし、アプリケーション開発の準備は万端ブゥ!

師匠
師匠

では早速コーディングを開始していこう。

アプリケーション作成(redux-thunk導入前まで)

jsonPlaceholder APIの作成

師匠
師匠

このファイルでは、axios.create()を用いて外部ファイルで共通で使うHTTP通信のURLをエクスポートしているよ。axiosに関しては以前も学習したね。

Action creatorの作成

師匠
師匠

ここでは、getPostList()という名前でAction creatorを定義しているよ。getPostList()async/awaitを使うことで非同期にJSONPlaceholderからデータを取得しているよ。

そして、取得したデータをpayloadとして返しているね。

Reducersの作成

師匠
師匠

ここではpostListReducer()を定義しているね。

actionのtypeが”GET_POST_LIST”の場合にStore内の状態を更新するようにロジックを組んでいるよ。

Storeの作成

師匠
師匠

src直下のindex.jsでStoreの作成をするんだったね。

reduxからcreateStoreをインポートし、先ほどのReducersファイルを元にStoreが作成されるよ。

また、作成したStoreのデータを各コンポーネントに渡すために、Providerをインポートし、Appコンポーネントに被せているね。

各Componentの作成

師匠
師匠

ここでは、次に作成するPostListコンポーネントを表示するという役割があるよ。

師匠
師匠

そして、最後にこのPostListコンポーネントでは以下のことをしているよ。

・コンポーネントがマウントされた直後にgetPostList関数を発火(JSONPlaceholderからデータを取得しStoreを更新)

・connectを用いて、StoreからStateのデータを取得

・取得したデータをmap関数を用いて全てレンダリング

とんぺい
とんぺい

なんだか特に難しいところはなかったブゥね!

早速動作確認をしてみるブゥ!

動作確認

とんぺい
とんぺい

ブブゥ!?

何かエラーが吐き出されているブゥ!

Action must be plain objects ??

師匠
師匠

これは想定内のエラーだから大丈夫だよ。

とりあえずここで一旦休憩を挟んで、次回にこのエラー内容の詳細と、エラーの解決方法について解説していこう。

とんぺい
とんぺい

続きが気になるブゥ・・・

でも休憩も大切だから、しっかり休んでまた続きを聞きにくるブゥ!

コメント

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

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