Redux store内の製品データの変更

製品を追加する方法は学びましたが、製品情報を変更したい場合はどうすればよいでしょうか？このレッスンと次回のレッスンで、その方法について見ていきましょう。

製品アプリケーションを開き、ファイル productsSlice.js に移動しましょう。まず、スライス products に対して、製品の更新時に実行される別のreducerを作成する必要があります。これを productUpdated と名付け、reducer productAdded の後の reducers フィールドに追加します。また、reducerが動作するために必要なパラメータ state と action をすぐに渡します。

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

では、製品を更新するために必要なデータについて考えてみましょう。まず第一に、store内で対象の製品を見つけるために使う id です。残りのデータ、つまり名前、説明、価格、数量は変更用のデータです。これらの値は、actionオブジェクトの payload プロパティから取得します。もし手動で記述するとしたら、以下のようになります。payload プロパティの期待値は単一の引数であるため、ここにはオブジェクトを渡すことに注意してください（これについては後で説明します）：

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

主要なポイントを確認したので、productUpdated の中括弧内にコードを記述できます。まず、action オブジェクトから変更されたデータを取得します：

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

次に、取得した id に基づいて、変更が必要な製品を見つけます：

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

そのような製品がstore内に見つかった場合、そのデータを新しい値に置き換えます：

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

あとは、コンポーネントで使用するためのaction creatorをエクスポートするだけです。これは createSlice が私たちのために作成してくれます。既存の productAdded と一緒に、ファイルの末尾のエクスポートに追加しましょう：

export const { productAdded, productUpdated } = productsSlice.actions

学生用のアプリケーションを開いてください。レッスンの内容を学んだ後、ファイル studentsSlice.js で、productsSlice のための別のreducerを追加してください。これはユーザーによるデータ変更時にstore内の学生データを更新するものです。これを studentUpdated と名付けてください。

この場合、あなたのactionオブジェクトはどのようになりますか？回答にそのコードを送信してください。

ファイルの末尾で、作成したaction creator studentUpdated をエクスポートしてください。