Reduxでのリクエストの重複排除

このレッスンは、アプリケーションの起動時にデータ取得リクエストが重複して送信され、その後同じidを持つ商品のペアが到着し、結果としてブラウザのコンソールに恐ろしい赤い警告が表示される場合に役立ちます。

この原因は、開発モード（dev）でReact.StrictModeを使用した場合の、React 18以降のバージョンにおけるコンポーネントのマウントの特殊性にあります（本番モードではこの問題は発生しないと言われています）。最初にコンポーネントがマウントされ、その後アンマウントされ、再びマウントされます。そのため、リクエストも2回送信されてしまうのです。

あなたがこの教材を学習する頃には、Reactにおけるこの二重マウントは何らかの形で変更されているかもしれません。深く立ち入らずに、単にReactフックのuseRefを利用してこの問題を回避する方法をご紹介します。

商品アプリケーションを開き、その中のファイルProductsList.jsxを開きましょう。そこにuseRefフックをインポートします：

import { useEffect, useRef } from 'react'

次に、以下のuseEffectを含むコードブロックを少し変更します：

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

まず、useRef用の新しい変数dataFetchを導入します。初期状態では、そのcurrentプロパティをfalseに設定します。アプリケーションが既に起動され、それに応じてリクエストが送信済みであれば、currentプロパティはすでにtrueになっているため、関数から単に抜け出し、データの重複リクエストは発生しません。上記のコード片は以下のようになります：

const dataFetch = useRef(false)

useEffect(() => {
	if (dataFetch.current) return
	dataFetch.current = true
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

再度アプリケーションを起動すると、コンソールの赤い警告が消え、サーバーで計画した通り、重複のない8個の商品リストが表示されるのを確認できるでしょう。これで、Redux DevToolsでリクエスト時に生成されるアクションが重複しなくなります。

生徒情報アプリケーションを開き、その中のファイルStudentsList.jsxを開いてください。もし同様の問題があれば、このレッスンの内容に従って二重リクエストの問題を解決してください。