Reduxスライスからのデータの再利用

前回のレッスンでは、商品追加フォームに 出品者を選択するドロップダウンフィールドを 追加しました。ここで、この情報を アプリケーションの他の複数箇所でも 表示する必要が出てきたと仮定しましょう。 そのために毎回コードを複製するのではなく、 スライスからデータを取得し、 必要な場所で表示するための 独立したコンポーネントを作成します。

商品アプリケーションを開きましょう。 次に、productsフォルダ内に 新しいファイルSellerOfProd.jsxを作成します。 まず、必要な商品のスライスを取得するために フックuseSelectorをインポートします。

products/SellerOfProd.jsximport { useSelector } from 'react-redux'

次に、新しく作成するコンポーネントの props経由で渡される販売者のIDを使用して、 storeから必要な商品を取得します。

products/SellerOfProd.jsxexport const SellerOfProd = ({ sellerId }) => {
  const seller = useSelector((state) =>
    state.sellers.find((seller) => seller.id === sellerId)
  )
}

販売者が存在する場合はその名前を返し、 存在しない場合は'unknown'を返します。

products/SellerOfProd.jsxreturn <span>by {seller ? seller.name : 'unknown'}</span>

では、新しく作成したコンポーネントを ProductsList.jsxにインポートし、 ProductsList関数内の商品名タイトルの直後に 挿入しましょう。見ての通り、propsとしてIDを渡しています。

products/ProductsList.jsx<SellerOfProd sellerId={product.seller} />

これで、アプリケーションを起動し、 新しい商品を追加してリストから見つけると、 販売者情報が表示され、 アプリ起動時に自動追加された商品には 'unknown'が表示されるはずです。

余談ですが、VS Codeのeslintが sellerIdについて警告を出し、 アプリケーションが動作する場合は、 今はそれを無視するか、 アプリの.eslintrc.cjsファイルを開いて rulesに"react/prop-types": "off"を 追加することができます。

当然、商品ページにも販売者情報を 追加したいでしょう。 そのためには、ProductPageのマークアップ内の 商品名タイトルの後に同じ行を挿入し、 すべてが機能していることを確認します。

products/ProductPage.jsx<SellerOfProd sellerId={product.seller} />