Reduxでの販売者リスト

前回のレッスンでは、主要な内容を終えました。 これで、thunkを使用してサーバーから製品リストを取得し、 サーバーに新しい製品を保存できるようになりました。 では、販売者の処理に移りましょう。 私たちは彼らのデータも取得しています。 販売者リスト用の別ページを作成しましょう。

製品アプリケーションを開き、その中の フォルダ sellers を見つけます。このフォルダ内に ファイル SellersList.jsx を作成します。 ここでは、後ほど sellersSlice.js に記述する selectAllSellers と、 useSelector と Link を使用します：

sellers/SellersList.jsximport { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

次に、 SellersList コンポーネント自体を作成します。 この中で、 useSelector フックを使って全販売者を取得し、 その後、 map ループを使用して販売者リストのマークアップを取得します。 各販売者名は、その詳細ページへのリンクになります。 最後に、見出しと取得したリストを含むマークアップを返します：

sellers/SellersList.jsxexport const SellersList = () => {
  const sellers = useSelector(selectAllSellers)
  const sellersToRender = sellers.map((seller) => (
    <li key={seller.id}>
      <Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
    </li>
  ))

  return (
    <div>
      <h2>Sellers:</h2>

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

次に、ファイル sellersSlice.js に移動し、 productsSlice.js のセレクターを参考に、 ファイルの末尾、レデューサーのエクスポート後に2つのセレクターを作成します：

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

これで、リストページのルートを設定する必要があります。 そのために、ファイル App.jsx を開き、 子ルートの配列 children にもう1つのオブジェクトを追加します （コンポーネント SellersList のインポートを忘れないでください）：

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

メニューのリンク 'Sellers' が機能するようにするため、 ファイル root.jsx（懐かしい...）に移動し、 a タグを NavLink 要素に置き換えましょう：

app/root.jsx<NavLink to="/sellers" end>
  Sellers
</NavLink>

最後に。 メニューでアクティブなリンクがハイライトされ、 どのページにいるかわかりやすくするために、 index.css にスタイルを追加します：

index.cssnav a.active {
  color: purple;
}

アプリケーションを起動しましょう。 これで、メニューの 'Sellers' をクリックして 販売者ページにアクセスできるようになりました。 もちろんその前に、メニューの 'Products' をクリックして 製品を読み込む必要があります。 次のレッスンでは、各販売者用のページを作成し、 このReduxチュートリアルの学習を完了します。