Reduxへの販売者情報の追加

これまで、私たちの製品は実際には販売者によってアプリケーションに追加されていることを話してきました。新しい製品を追加する際に、販売者情報を表示するようにしましょう。

製品アプリケーションを開き、その中のファイルproductsSlice.jsを開きます。prepareにもう一つパラメータを渡すようにしましょう。それをsellerIdと呼び、アクションのpayloadに設定します。これで、prepareのコード部分は次のようになります：

products/productsSlice.jsprepare(name, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      name,
      desc,
      price,
      amount,
      seller: sellerId,
    },
  }
},

次に、製品追加フォームのファイルNewProductForm.jsxにいくつかの変更を加える必要があります。まず、販売者ID用のローカルステートをもう一つ追加します：

products/NewProductForm.jsxconst [sellerId, setSellerId] = useState('')

次に、useDispatch用の変数dispatchを宣言した後、フックuseSelectorを使用してステートから販売者スライスを取得するコードを追加します：

products/NewProductForm.jsxconst sellers = useSelector((state) => state.sellers)

入力フィールドのハンドラに、もう一つ追加します：

products/NewProductForm.jsxconst onSellerChanged = (e) => setSellerId(e.target.value)

productAddedアクションにsellerIdも追加するように、onSaveProductClickを修正します：

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount, sellerId))