Reduxでの製品ページ

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

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

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

products/ProductPage.jsxexport const ProductPage = () => {}

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

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params
}

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

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

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

products/ProductPage.jsximport { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

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

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params

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

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

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

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