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

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

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

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  save
</button>

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

products/NewProductForm.jsximport { nanoid } from '@reduxjs/toolkit'

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

products/NewProductForm.jsximport { useDispatch } from 'react-redux'

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

products/NewProductForm.jsxconst dispatch = useDispatch()

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

products/NewProductForm.jsximport { productAdded } from './productsSlice'

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

products/NewProductForm.jsxconst onSaveProductClick = () => {}

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

products/NewProductForm.jsxconst 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をクリックしてみてください）。 成功です：手動で記述する必要はありませんでした。