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

여기서 두 가지 중요한 점을 언급해야 합니다. 이전 강의에서 기억하시겠지만, 리듀서 코드에서 이렇게 직접 값을 업데이트하는 것은 허용되지 않습니다 (이 줄을 보세요: reactions[reaction]++). 그러나 우리는 이 행동을 용납할 수 있는데, 그 이유는 Immer 라이브러리를 사용하는 createSlice 내부에서 이 작업을 수행하기 때문입니다. Immer는 우리의 코드를 값 업데이트를 "안전하게" 재작성하는 작업을 처리해 줄 것입니다. 이를 통해 우리는 복잡한 것들을 더 간단한 방식으로 작성할 수 있습니다.

다음으로 기억해야 할 것은 action 객체가 가능한 최소한의 정보만 포함해야 한다는 것입니다 - 무슨 일이 일어났는지 표시하기 위해 필요한 만큼만. 그 안에서 어떤 계산도 수행해서는 안 됩니다. 상태 업데이트를 위한 모든 계산은 리듀서 내에서 수행되어야 하며, 필요한 만큼의 로직을 여기에 작성할 수 있습니다.

학생 애플리케이션을 열고 studentsSlice.js 파일에서 reducers 필드에 강의에서 보여준 대로 또 다른 리듀서 voteClicked를 추가하세요. 그것을 위한 코드를 작성하세요. 당신의 리듀서 작업은 클릭 시 해당 학생에 대해 클릭된 vote(또는 투표) 값을 1만큼 증가시키는 것입니다.

파일 끝에서 생성된 action creator voteClicked를 내보내는 것을 잊지 마세요.