Reduxでの販売者ページ

あと少しです。このレッスンでは最後の作業として、 私たちのアプリケーションに各販売者の個別ページを追加しましょう。 ここではもうおなじみの操作のみです。さあ、始めましょう。

商品のアプリケーションを開き、その中の フォルダ sellers を開きます。このフォルダ内に ファイル SellerPage.jsx を作成しましょう。次に、 コンポーネント SellerPage のコードを書き始めます：

sellers/SellersPage.jsxexport const SellerPage = () => {}

まず、販売者のIDを取得し、それを使って スライス内から該当する販売者のオブジェクトを探します：

sellers/SellersPage.jsxexport const SellerPage = () => {
  let params = useParams()
  const { sellerId } = params

  const seller = useSelector((state) => selectSellerById(state, sellerId))
}

次に、SellerPage のコード内で販売者を取得した後、 すべての商品を取得し、その中から この販売者が出品した商品だけを選択します：

sellers/SellersPage.jsxconst productsOfSeller = useSelector((state) => {
  const allProducts = selectAllProducts(state)
  return allProducts.filter((product) => product.seller === sellerId)
})

そして、選択された商品の名前から map を使ってリストを作成します。さらに、 このリスト内の各商品名は その商品のページへのリンクとなります：

sellers/SellersPage.jsxconst productNames = productsOfSeller.map((product) => (
  <li key={product.id}>
    <Link to={`/products/${product.id}`}>{product.name}</Link>
  </li>
))

最後に、SellerPage のコードで マークアップを返します：販売者名の見出しと、 この販売者が出品した商品のリストです：

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Seller: {seller.name}</h2>

  <ul>{productNames}</ul>
  </div>
)

もちろん、販売者ページ用のルートも 必要です。 ファイル App.jsx を開き、子ルートの最後に 追加します：

App.jsx{
  path: '/sellers/:sellerId',
  element: <SellerPage />,
},

SellersPage.jsx と App.jsx で必要なフックやコンポーネントを インポートすることを忘れないでください。

アプリケーションを起動し、商品を読み込んだら、 左側のメニューでリンク 'Sellers' をクリックします。これで、 販売者名をクリックしてその販売者のページにアクセスし、 そのページで販売者の全商品を確認できます。さらに、 商品のいずれかをクリックすると、その商品のページに 移動します。

以上で今回は終わりです。アプリケーション作成のための Reduxの基礎、そして少し深い部分まで学びました。 さまざまな便利なツールについても知りました。 あなたのReduxアプリケーション作成に幸運を祈ります！