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

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

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

products/ProductsList.jsximport { selectAllProducts, fetchProducts } from './productsSlice'

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

products/ProductsList.jsximport { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

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

products/ProductsList.jsxconst dispatch = useDispatch()

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

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

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

products/ProductsList.jsxuseEffect(() => {
  if (productStatus === 'idle') {
    dispatch(fetchProducts())
  }
}, [productStatus, dispatch])

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

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