Reduxアプリケーションへの追加ロジックの組み込み

このレッスンでは、アプリケーションへの最後のコンポーネント追加を行います。具体的には、製品に対して、ユーザーがその製品を注文したか、またはその情報を読んだという「反応」を追加していきます。

製品アプリケーションを開きましょう。販売者名の場合と同様に、ユーザーの反応をアプリケーション内の複数の場所で表示する必要があります。これはつまり、独立したコンポーネントが必要になるということです。したがって、まず products フォルダ内にファイル UserReactions.jsx を作成します。最初に、反応の種類を定義するオブジェクトを記述しましょう：

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

次に、その下に関数の記述を開始します。この関数には product スライスを渡します：

export const UserReactions = ({ product }) => {}

それでは、中括弧内に UserReactions 関数の本体を記述します。そのために、reactionObj のキーと値のペアを map を使用して繰り返し処理し、それぞれのボタンの表示記号（'+'、'+/-'、または '-'）と、各反応の数値（これはstore内の product から反応名を使って取得します）を取得します：

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

その後、関数のコードの最後で、ボタン userReactions を含むマークアップを返します：

return <div>{userReactions}</div>

さらに、index.css に少しスタイルを追加します：

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

これが少し複雑に見えても心配しないでください。この先ですべてがはるかに明確に理解できるようになります。

受講生のアプリケーションを開いてください。あなたのアプリケーションでは、ユーザーが受講生の中からグループのリーダーとスポーツチームのキャプテンを選ぶ機能を持たせます。したがって、このレッスンの資料を学習した後、students フォルダ内にファイル UserVotes.jsx を作成してください。ファイルの冒頭で、2つのプロパティ（leader と captain）を持つオブジェクト votesObj を作成します。値は、ボタンの表示記号として GL と TC とします。

ファイル内で、オブジェクト votesObj を定義した後、このレッスンの資料と同様に、関数 UserVotes のコードを記述してください。