Reduxへの販売者情報の追加

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

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

prepare(name, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			name,
			desc,
			price,
			amount,
			seller: sellerId,
		},
	}
},

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

const [sellerId, setSellerId] = useState('')

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

const sellers = useSelector((state) => state.sellers)

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

const onSellerChanged = (e) => setSellerId(e.target.value)

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

dispatch(productAdded(name, desc, price, amount, sellerId))

学生管理アプリケーションを開いてください。学生を追加した講師の情報を入力できる機能を追加してください。そのために、このレッスンの教材を学び、ファイルstudentsSlice.js内の関数prepareに変更を加えてください。

ファイルNewStudentForm.jsxに適切な変更を加えてください。