Reduxアプリケーションへのリデューサーの追加

前回のレッスンでは、 UserReactionコンポーネントを作成し、各製品にユーザー反応を持たせました。次に、ユーザーがいずれかの反応ボタンをクリックしたときに反応カウンターを処理するリデューサーを作成する必要があります。

製品アプリケーションを開き、すべてのリデューサーが含まれるファイル productsSlice.jsを開きましょう。次に、reducersプロパティ内に別のリデューサーreactionClickedを作成します（productAddedの前など、最初に配置しても構いません。順序は重要ではありません）。通常通り、stateとactionをパラメータとして渡します：

reactionClicked(state, action) {},

次に、前のステップで空のままにした中括弧の内側にコードを記述しましょう。まず、actionオブジェクトの payloadから製品IDと反応名を抽出します：

const { productId, reaction } = action.payload

次に、渡されたステートから必要な製品を取得します：

const currentProduct = state.find(product => product.id === productId)

そのような製品が存在する場合は、渡された反応の値を1増やします：

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

これで完了です。 reactionClickedのコードが完成しました：

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

ファイルの最後に、作成されたaction creatorをエクスポートしましょう：

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

ここで、2つの重要な点に注意する必要があります。前回のレッスンから覚えているかもしれませんが、リデューサー内でこのように直接値を更新することは通常禁止されています（この行を見てください： reactions[reaction]++）。しかし、これはImmerライブラリを使用している createSlice内で行っているため問題ありません。 Immerが、このコードを「安全な」値の更新に変換してくれます。これにより、複雑なことをより簡単な方法で記述できるようになります。

次に覚えておくべきことは、 actionオブジェクトには、発生したことを示すために必要な最小限の情報のみを含めるべきだということです。アクション内で計算を行うべきではありません。ステートを更新するためのすべての計算はリデューサーで行うべきであり、必要なだけのロジックをここに記述することができます。

学生アプリケーションを開き、 studentsSlice.jsファイルの reducersフィールドに、レッスンで示したように、もう1つのリデューサーvoteClickedを追加してください。そのためのコードを記述してください。あなたのリデューサーのタスクは、クリックされたvote（または投票）の値を該当する学生に対して1増やすことです。

ファイルの最後に、作成されたaction creator voteClickedをエクスポートすることを忘れないでください。