Reduxでのactionの送信とuseDispatchフック

Reduxアプリケーションの動作に必要なほぼ全ての要素を実装しました。残っているのは、Reactコンポーネントからのaction送信について理解することだけです。始めましょう。

商品管理アプリケーションを開いてください。コンポーネント NewProductForm のフォームには、新しい商品データを保存するためのボタンがあります。このボタンにクリックハンドラーを設定しましょう。クリック時にハンドラー onSaveProductClick が実行されるようにします:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

新しい商品を作成する際には、新しいidが必要になります。これは広く知られているライブラリ nanoid を使って生成します。ちなみに、これはRTKパッケージにすでに含まれているのでインストールは不要です。インポートにnanoidを追加しましょう:

import { nanoid } from '@reduxjs/toolkit'

また、stateを変更する唯一の方法は、 storeが持つメソッド dispatch を呼び出してactionオブジェクトを渡すことです。このメソッドにアクセスするために、React-Reduxのフック useDispatch を使用します。これもインポートしましょう:

import { useDispatch } from 'react-redux'

関数 NewProductForm のコード内で、ローカルstate用の定数を定義した直後に、 dispatch 用の定数を定義します:

const dispatch = useDispatch()

また、前のレッスンで取得した action creator productAdded をインポートする必要があります:

import { productAdded } from './productsSlice'

これで、実際のハンドラー関数 onSaveProductClick を書くことができます。 return コマンドの前に書きましょう:

const onSaveProductClick = () => {}

関数内で dispatch を呼び出し、 actionオブジェクトを形成します。生成されたid、商品名、説明、価格、数量がプロパティ payload に入ります。これらのデータはすべてローカルstateから取得します。この際、最初に条件文で全てのフィールドが埋まっているか確認し、その場合にのみ dispatch を呼び出します。関数のコードの最後で、ローカルstateを初期状態に戻します:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

では、アプリケーションを起動し、フォームのフィールドにデータを入力して保存ボタンを押してみましょう。成功です。ページ下部に新しい商品が表示されました。 Redux DevToolsを開き、その中のInspectorタブを見ると、左側に@@INITに加えて私たちのaction products/productAdded が表示されています。右側では、ActionタブとStateタブを切り替えながら、 @@INITと products/productAdded を選択できます。これで、新しい商品が追加されることが確認できます。また、Actionタブでは、 createSlice によって自動生成されたactionを見ることができます（例えばRawをクリックしてみてください）。成功です：手動で記述する必要はありませんでした。

学生管理アプリケーションを開き、ファイル NewStudentForm.jsx を開いて、保存ボタンにクリックハンドラーを設定してください。

必要な全てのインポートを記述し、レッスンで示した通りに dispatch メソッドを適用して、関数ハンドラー onSaveStudentClick を書いてください。

アプリケーションを起動し、フォームのフィールドにデータを入力して保存ボタンを押してください。ページ下部に新しい学生が追加されたことを確認してください。

Redux DevToolsを開き、ActionタブとStateタブを順に確認して、新しい学生オブジェクトが追加されていることを確認してください。生成されたactionオブジェクトを確認し、この課題の回答として送信してください。