Reduxのレデューサーとアクション

前回のレッスンでは、商品を追加するためのフォームを完成させ、メインページに表示しました。しかし、現在追加されたデータは保存されず、つまり新しい商品はストア内の既存商品に追加されません。これを修正しましょう。

まず、商品アプリケーションでファイル productsSlice.jsx を開き、 createSlice の reducer プロパティ内に、渡された現在の状態とアクションに基づいてストアに商品を追加する productAdded 関数を記述します。ここで渡されるのは state 全体ではなく、商品を担当する部分のみであることに注意してください（products スライスはそれのみを知っています）。新しい商品のオブジェクトは、フォームの保存ボタンが押されたときにハンドラーによって生成される action オブジェクトの payload プロパティに含まれます。結果として、レデューサー productAdded は createSlice のコード内で次のようになります：

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

アクションについてはどうでしょうか？チュートリアルの最初の方で、アクションはアプリケーションで発生した事象を記述するオブジェクトとして表現されるものであることに触れました。また、次のようなアクションオブジェクトを作成するアクションクリエーター関数を使用できることも話しました：

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

良いニュースは、私たちが使用している createSlice 関数がこの作業を代わりに行ってくれることです。レデューサーを記述すると、この関数は自動的に同じ名前のアクションクリエーターを作成してくれます。私たちは、コンポーネントで使用するために得られたアクションクリエーターをエクスポートするだけです。ファイルの最後、レデューサーをエクスポートする前に次のように行いましょう：

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

学生アプリケーションを開き、ファイル studentsSlice.jsx を開いて、レッスンで示した通りに createSlice の reducer フィールドの値を追加してください。

ファイル studentsSlice.jsx の最後に、得られたアクションクリエーター関数のエクスポートを追加してください。