Reduxでの販売者ページ
あと少しです。このレッスンでは最後の作業として、 私たちのアプリケーションに各販売者の個別ページを追加しましょう。 ここではもうおなじみの操作のみです。さあ、始めましょう。
商品のアプリケーションを開き、その中の
フォルダ sellers を開きます。このフォルダ内に
ファイル SellerPage.jsx を作成しましょう。次に、
コンポーネント SellerPage のコードを書き始めます：
export const SellerPage = () => {}
まず、販売者のIDを取得し、それを使って スライス内から該当する販売者のオブジェクトを探します：
export const SellerPage = () => {
let params = useParams()
const { sellerId } = params
const seller = useSelector((state) => selectSellerById(state, sellerId))
}
次に、SellerPage のコード内で販売者を取得した後、
すべての商品を取得し、その中から
この販売者が出品した商品だけを選択します：
const productsOfSeller = useSelector((state) => {
const allProducts = selectAllProducts(state)
return allProducts.filter((product) => product.seller === sellerId)
})
そして、選択された商品の名前から
map を使ってリストを作成します。さらに、
このリスト内の各商品名は
その商品のページへのリンクとなります：
const productNames = productsOfSeller.map((product) => (
<li key={product.id}>
<Link to={`/products/${product.id}`}>{product.name}</Link>
</li>
))
最後に、SellerPage のコードで
マークアップを返します：販売者名の見出しと、
この販売者が出品した商品のリストです：
return (
<div>
<h2>Seller: {seller.name}</h2>
<ul>{productNames}</ul>
</div>
)
もちろん、販売者ページ用のルートも
必要です。
ファイル App.jsx を開き、子ルートの最後に
追加します：
{
path: '/sellers/:sellerId',
element: <SellerPage />,
},
SellersPage.jsx と
App.jsx で必要なフックやコンポーネントを
インポートすることを忘れないでください。
アプリケーションを起動し、商品を読み込んだら、
左側のメニューでリンク
'Sellers' をクリックします。これで、
販売者名をクリックしてその販売者のページにアクセスし、
そのページで販売者の全商品を確認できます。さらに、
商品のいずれかをクリックすると、その商品のページに
移動します。
以上で今回は終わりです。アプリケーション作成のための Reduxの基礎、そして少し深い部分まで学びました。 さまざまな便利なツールについても知りました。 あなたのReduxアプリケーション作成に幸運を祈ります！
学生のアプリケーションを開いてください。
レッスンの内容を学んだ後、フォルダ teachers 内に
ファイル TeacherPage.jsx を作成してください。
コンポーネント TeacherPage のコードで、必要な教師のオブジェクトと、
その教師の担当する全学生を取得します。
map を使ってリストを作成し、各学生のフルネームを
その学生のページへのリンクにしてください。
返されるマークアップには、教師のフルネームの見出しの下に、 彼/女が担当する科目の少し小さな見出し、 そしてその下に担当学生のリストを配置してください。
App.jsx で、教師ページ用の子ルートを
もう一つ追加して接続してください。
アプリケーションを起動し、すべてが 機能していることを確認してください。
