Redux store에서 제품 데이터 변경하기

우리는 제품을 추가하는 방법을 배웠습니다. 그렇다면 제품 정보를 변경하고 싶다면 어떻게 해야 할까요? 이번 강의와 이후 강의들에서 그 방법을 살펴보겠습니다.

우리의 제품 애플리케이션을 열고 productsSlice.js 파일로 들어갑니다. 먼저 products 슬라이스를 위해 제품을 업데이트할 때 실행될 또 다른 리듀서를 작성해야 합니다. 이 리듀서를 productUpdated라고 이름 지우고 productAdded 리듀서 뒤에 있는 reducers 필드에 추가합니다. 또한 리듀서가 작동하는 기반이 되는 매개변수 state와 action를 즉시 전달합니다:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

이제 제품 업데이트를 위해 어떤 데이터가 필요한지 생각해 봅시다. 무엇보다도 store에서 우리가 원하는 제품을 찾을 수 있는 id가 필요합니다. 나머지 데이터인 이름, 설명, 가격 및 수량은 변경할 값들입니다. 우리는 이러한 모든 값을 들어오는 action 객체의 payload 속성에서 얻을 것이며, 만약 우리가 이를 수동으로 작성한다면 아래와 같이 보일 것입니다. payload 속성의 예상 값은 하나의 인수이므로 여기에 객체를 전달할 것입니다(이에 대해서는 나중에 논의하겠습니다):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

주요 사항들을 파악한 후 이제 productUpdated의 중괄호 안에 코드를 작성할 수 있습니다. 먼저 action 객체에서 변경된 데이터를 가져옵니다:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

이제 받은 id를 사용해 변경해야 할 제품을 찾습니다:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

해당 제품이 store에서 발견되면, 그 데이터를 새로운 값으로 바꿉니다:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

이제 우리에게 남은 일은 컴포넌트에서 사용하기 위해 action creator를 내보내는 것뿐이며, 이는 createSlice가 친절하게 우리를 위해 생성해 줄 것입니다. 파일 끝의 내보내기에 기존의 productAdded와 함께 추가해 보겠습니다:

export const { productAdded, productUpdated } = productsSlice.actions

학생 애플리케이션을 열어주세요. 강의 자료를 학습한 후, studentsSlice.js 파일에서 사용자가 데이터를 변경할 경우 store에서 학생 데이터를 업데이트하는 productsSlice를 위한 또 다른 리듀서를 작성해 보세요. 이를 studentUpdated라고 이름 지으세요.

이 경우 여러분의 action 객체는 어떻게 보일까요? 답변에 그 코드를 보내주세요.

파일 끝에서 얻은 action creator studentUpdated를 내보내세요.