Reduxでの製品ページ

このレッスンでは、特定の製品情報を表示するための個別ページを作成します。

製品アプリを開き、productsフォルダ内にファイルProductPage.jsxを作成します。覚えている通り、各製品は一意のIDを持っています。このIDのおかげで、各製品のページに対して一意のURLを生成することができます。従来、それは/products/id123のようになります。 IDはその動的な部分に含まれます（ルーティング自体は少し後で扱います）。

では、ProductPage.jsx内に空のコンポーネントProductPageを作成しましょう：

export const ProductPage = () => {}

ここで最初に行うことは、フックuseParamsを使用して、現在いる製品ページのURLの動的な部分を抽出することです：

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

次に、取得したidを使って、既知のフック useSelectorを使用してstore内の productsスライスから必要な製品を検索します：

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

両方のフックをファイルにインポートすることを忘れないでください：

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

もし必要な製品が見つからない場合（例えば、ユーザーが不正なアドレスを入力した場合）、その情報を画面に表示します。この段階で、コンポーネントProductPageのコードは次のようになるはずです：

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>そのような製品はありません</p>
	}
}

そして、取得した製品データをマークアップ内に表示するだけです：

return (
	<div>
		<h2>{product.name}</h2>
		<p>説明: {product.desc}</p>
		<p>価格: {product.price}</p>
		<p>数量:{product.amount}</p>
	</div>
)

学生アプリを開いてください。 studentsフォルダ内にファイル StudentPage.jsxを作成し、選択した学生の情報を取得して表示します。

react-reduxのフックuseSelectorを使用して、レッスンで示したように必要な学生情報を取得してください。

コンポーネント内で、取得した学生情報を画面に表示してください。