Reduxでの販売者リスト
前回のレッスンでは、主要な内容を終えました。 これで、thunkを使用してサーバーから製品リストを取得し、 サーバーに新しい製品を保存できるようになりました。 では、販売者の処理に移りましょう。 私たちは彼らのデータも取得しています。 販売者リスト用の別ページを作成しましょう。
製品アプリケーションを開き、その中の
フォルダ sellers を見つけます。このフォルダ内に
ファイル SellersList.jsx を作成します。
ここでは、後ほど sellersSlice.js に記述する
selectAllSellers と、 useSelector と
Link を使用します：
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'
次に、 SellersList コンポーネント自体を作成します。
この中で、 useSelector フックを使って全販売者を取得し、
その後、 map ループを使用して販売者リストのマークアップを取得します。
各販売者名は、その詳細ページへのリンクになります。
最後に、見出しと取得したリストを含むマークアップを返します：
export 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つのセレクターを作成します：
export const selectAllSellers = (state) => state.sellers
export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)
これで、リストページのルートを設定する必要があります。
そのために、ファイル App.jsx を開き、
子ルートの配列 children にもう1つのオブジェクトを追加します
（コンポーネント SellersList のインポートを忘れないでください）：
{
path: '/sellers',
element: <SellersList />,
},
メニューのリンク 'Sellers' が機能するようにするため、
ファイル root.jsx（懐かしい...）に移動し、
a タグを NavLink 要素に置き換えましょう：
<NavLink to="/sellers" end>
Sellers
</NavLink>
最後に。
メニューでアクティブなリンクがハイライトされ、
どのページにいるかわかりやすくするために、
index.css にスタイルを追加します：
nav a.active {
color: purple;
}
アプリケーションを起動しましょう。
これで、メニューの 'Sellers' をクリックして
販売者ページにアクセスできるようになりました。
もちろんその前に、メニューの 'Products' をクリックして
製品を読み込む必要があります。
次のレッスンでは、各販売者用のページを作成し、
このReduxチュートリアルの学習を完了します。
あなたの学生管理アプリケーションを開いてください。
レッスンの内容を確認したら、 teachers フォルダ内に
ファイル TeachersList.jsx を作成します。
このコンポーネントを使用して、講師のリストを表示します。
必要なコンポーネントとフックをインポートしてください。
コンポーネント TeachersList のコードを記述してください。
その中で全講師を取得し、講師のリスト teachersToRender を作成します。
このリストの各行に、苗字とイニシャル、そして括弧内に担当科目を表示させてください。
各フルネーム（苗字とイニシャル）を、各講師の個別ページへのリンクにしてください。
その後、コンポーネントのコードの最後で、
見出しと作成したリストを含むマークアップを返してください。
ファイル teachersSlice.js の末尾に、
レッスンで示したように、2つのセレクター関数
selectAllTeachers と selectTeacherById を作成します。
App.jsx で、講師ページ用の別の子ルートを追加してください。
ファイル root.jsx のメニューで、
'Teachers' の a タグを、
レッスンで示したように NavLink に置き換えてください。
メニューのアクティブなリンクが何らかの方法でハイライトされるように、
そのためのスタイルを index.css に追加してください。
