Reduxスライスからのデータの再利用
前回のレッスンでは、商品追加フォームに 出品者を選択するドロップダウンフィールドを 追加しました。ここで、この情報を アプリケーションの他の複数箇所でも 表示する必要が出てきたと仮定しましょう。 そのために毎回コードを複製するのではなく、 スライスからデータを取得し、 必要な場所で表示するための 独立したコンポーネントを作成します。
商品アプリケーションを開きましょう。
次に、productsフォルダ内に
新しいファイルSellerOfProd.jsxを作成します。
まず、必要な商品のスライスを取得するために
フックuseSelectorをインポートします。
import { useSelector } from 'react-redux'
次に、新しく作成するコンポーネントの props経由で渡される販売者のIDを使用して、 storeから必要な商品を取得します。
export const SellerOfProd = ({ sellerId }) => {
const seller = useSelector((state) =>
state.sellers.find((seller) => seller.id === sellerId)
)
}
販売者が存在する場合はその名前を返し、
存在しない場合は'unknown'を返します。
return <span>by {seller ? seller.name : 'unknown'}</span>
では、新しく作成したコンポーネントを
ProductsList.jsxにインポートし、
ProductsList関数内の商品名タイトルの直後に
挿入しましょう。見ての通り、propsとしてIDを渡しています。
<SellerOfProd sellerId={product.seller} />
これで、アプリケーションを起動し、
新しい商品を追加してリストから見つけると、
販売者情報が表示され、
アプリ起動時に自動追加された商品には
'unknown'が表示されるはずです。
余談ですが、VS Codeのeslintが
sellerIdについて警告を出し、
アプリケーションが動作する場合は、
今はそれを無視するか、
アプリの.eslintrc.cjsファイルを開いて
rulesに"react/prop-types": "off"を
追加することができます。
当然、商品ページにも販売者情報を
追加したいでしょう。
そのためには、ProductPageのマークアップ内の
商品名タイトルの後に同じ行を挿入し、
すべてが機能していることを確認します。
<SellerOfProd sellerId={product.seller} />
学生管理アプリケーションを開いてください。
レッスンの内容を学び、studentsフォルダ内に
コンポーネントTeacherForStudent用のファイルを作成します。
このコンポーネントは、教師の氏名と
その横に括弧で囲んだ担当科目を返すようにしてください。
必要な教師は、フックuseSelectorを使用して探します。
その学生に対応する教師がいない場合は、'anonym'を表示してください。
前の課題で作成したコンポーネントを使用して、 学生リストページの各学生に対して 教師データを表示してください。
前の課題と同じことを、 個別の学生ページに対して行ってください。
