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

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

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

{
	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メソッドに対して行いましょう：

prepare(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をインポートします：

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

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

const dispatch = useDispatch()

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

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

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

<UserReactions product={product} />

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

<UserReactions product={product} />

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

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

生徒アプリケーションを開いてください。ファイルstudensSlice.jsで、初期化用のオブジェクトに適切なフィールドを持つvotesプロパティを追加してください。 studentAddedレデューサーについても同様に行ってください。

ファイルUserVotes.jsx内の関数UserVotesの中で、 useDispatchフックのためのdispatchを設定し、投票ボタンのクリック時に、レッスンで示したように生徒のidとvoteの名前を渡して voteClickedアクションを送信する処理を作成してください。

投票用のボタンを、コンポーネントStudentsListと StudentPageのマークアップ内に表示してください。