ReduxでのコンポーネントからのThunkディスパッチ

このレッスンでは、Reactコンポーネント ProductsList から商品を取得するためのthunkをディスパッチします。

それでは、商品管理アプリケーションと、その中のファイル ProductsList.jsx を開きましょう。まず、以前作成したthunk fetchProducts をインポートします：

import { selectAllProducts, fetchProducts } from './productsSlice'

また、action creatorをディスパッチするためのフック useDispatch と、ここでは外部APIであるネットワークを扱うため副作用が発生するので、フック useEffect も必要になります：

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

次に、関数 ProductsList のコードの最初、 products の宣言の前に以下を追加します：

const dispatch = useDispatch()

さらに、ステートから商品を取得する際に、リクエストのステータスも取得します：

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

そしてその直後、フック useEffect を使って、コンポーネントのレンダリング後に商品を取得する必要があることをReactに伝えます。ここでリクエストステータスが必要になります。なぜなら、このリクエストが一度だけ送信されることが重要だからです：

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

これでアプリケーションを起動し、左側のメニューで 'Products' をクリックできます。まだ商品リストは表示されませんが、Redux DevToolsを開くと、左側のパネルに（前のレッスンで説明した通り）自動生成されたアクション products/fetchProducts/pending と fulfilled が表示されます。次に、アクション products/fetchProducts/fulfilled とそのフィールド payload をクリックしてみてください。ほら、商品リストがありますね！よかった、サーバー、データベース、クライアント、Reduxアプリケーションというすべての連鎖が調和的に連携して動作しています。ちなみに、ここには meta プロパティもあり、リクエストのステータスを確認できます。

もう一つ注意点があります。場合によっては、pending が、結果として fulfilled も2回表示されることがあるかもしれません。もしそうなっても心配しないでください。これについては後ほど説明します。

あなたの学生管理アプリケーションを開いてください。その中のファイル StudentsList.jsx を開きます。レッスンの内容に従って、必要なフックとthunkをインポートしてください。

レッスンの教材を参考に、リクエストステータス studentStatus を取得し、その後、useEffect を使用して、studentStatus の値が 'idle' の場合にのみ fetchStudents をディスパッチしてください。

あなたのアプリケーションを起動し、左側のアプリケーションメニューで 'Students' をクリックし、ブラウザのRedux DevTools拡張機能を起動します。このレッスンと同じように、pending と fulfilled （その中には学生データが入った payload があります）のアクションが表示されるはずです。拡張機能のタブをいろいろと探ってみてください。