Reduxアプリケーションでのactionの送信

これで、リアクションのスライスを更新するための レデューサーができました。次に、 ユーザーがリアクションボタンをクリックした際に 発火するactionの送信を追加する必要があります。 しかし、すべてが完全に動作する前に、 いくつかの変更を加える必要があります。

商品アプリケーションを開き、 その中のファイルproductsSlice.jsを開きましょう。 initialStateの定義を見てください。 気づきましたか？オブジェクトにリアクションの プロパティがありません。これを修正し、 各リアクションのカウンターを0に設定しましょう：

products/productsSlice.js{
  id: '1',
  title: 'Product1',
  desc: 'This is an amazing product',
  price: '300',
  amount: '30',
  reactions: {
    good: 0,
    soso: 0,
    bad: 0,
  },
},

2番目の初期化オブジェクトにも、自分でreactionsプロパティを追加してください。 このプロパティは、新しい商品にもこの機能を持たせるために、 以下のproductAddedレデューサーのコードにも追加する必要があります。 そのprepareメソッドに対して行いましょう：

products/productsSlice.jsprepare(title, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      title,
      desc,
      price,
      amount,
      seller: sellerId,
      reactions: {
        good: 0,
        soso: 0,
        bad: 0,
      },
    },
  }
},

では、actionの送信に取り組みましょう。 ファイルUserReactions.jsxを開き、 フックuseDispatchとreactionClickedをインポートします：

products/UserReactions.jsximport { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

UserReactions関数本体の冒頭で （const userReactions ...の前に） 最初の行として以下を記述します：

products/UserReactions.jsxconst dispatch = useDispatch()

そして、リアクションボタンにクリック時に reactionClickedを送信する処理を設定します。 この際、商品のidとクリックされたリアクションの名前が渡されます：

products/UserReactions.jsx<button
  key={name}
  type="button"
  className="reaction-button"
  onClick={() =>
    dispatch(reactionClicked({ productId: product.id, reaction: name }))
  }
>
  {image} {product.reactions[name]}
</button>

これで、各ページのマークアップにリアクションコンポーネントを 表示するだけです。ファイルProductsList.jsxの Link要素の前でこれを行いましょう：

products/ProductsList.jsx<UserReactions product={product} />

同様に、商品ページのファイルProductPage.jsxでも Link要素の前で行います：

products/ProductPage.jsx<UserReactions product={product} />

すべてが整ったので、アプリケーションを起動できます。 リアクションボタンをクリックしてみましょう。 新しい商品を追加して、それらのボタンをクリックすることもできます。 これで、リアクションボタンをどこでクリックしても、 変更された値はその商品に対して全てのページで表示されます。 個別の商品ページ（リアクションをクリックしたページ）と 商品リストのページを見てみてください。またその逆も、 すべてのページで特定の商品に対するリアクションの数は同じになります。

このレッスンは、Reduxでのデータ操作に関する章の最後でした。 Redux store内のデータをより深く扱い、 必要な機能をアプリケーションに追加し、 Reactコンポーネントでデータを使用する方法を学びました。