Redux에서 action 객체를 위한 데이터 준비하기

최근에 우리는 함수 createSlice가 action.payload를 생성할 때 하나의 인수를 기대한다는 점에 대해 이야기했습니다. 한편으로는 사용이 간단해지지만, 다른 한편으로는 action 객체의 내용을 준비하기 위해 추가적인 작업이 필요할 수 있습니다.

상품 애플리케이션을 열고, NewProductForm.jsx 파일을 열어봅시다. 다음 코드 줄에 주목하세요:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

여기서는 payload 객체를 React 컴포넌트 내에서 바로 구성하고 액션 productAdded에 전달합니다. 만약 같은 액션을 여러 컴포넌트에서 전송해야 하거나 구성 로직이 복잡해진다면 어떨까요? 이론상으로 우리 컴포넌트는 해당 action을 위한 payload 객체의 모양에 대해 신경 쓰지 않아야 합니다. 게다가 코드의 지속적인 중복도 마음에 들지 않습니다.

이 문제들은 다시 한번 우리의 유명한 createSlice가 해결해 줄 수 있습니다. 왜냐하면 리듀서를 작성할 때 여러 가지 로직을 작성하고, 난수를 생성하는 등의 작업을 할 수 있는 콜백 함수 prepare를 사용할 수 있기 때문입니다. 이런 경우 리듀서 필드의 값은 다음과 같은 객체로 표현될 수 있습니다:

{reducer, prepare}

이제 productsSlice.js 파일을 열고 리듀서 productAdded의 코드를 수정해 봅시다. 이제 이 코드 조각:

productAdded(state, action) {
	state.push(action.payload)
},

다음 코드로 변경합니다. 여기서 함수 reducer는 store의 상태를 업데이트하는 일을 담당하고, prepare는 생성된 id와 다른 데이터들이 포함된 payload 객체를 반환합니다:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

이제 id를 컴포넌트가 아닌 여기서 생성할 것이므로, 임포트에 nanoid를 추가합시다:

import { createSlice, nanoid } from '@reduxjs/toolkit'

마지막으로, NewProductForm.jsx에 변경 사항을 적용합시다. 다음 줄 대신:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

필요한 데이터를 간단히 쉼표로 구분하여 전달하는 다음 줄로 바꿉니다 (이 파일에서 nanoid를 임포트에서 제거하는 것을 잊지 마세요):

dispatch(productAdded(name, desc, price, amount))

애플리케이션을 실행한 후, 새로운 상품을 생성하고 아무것도 고장나지 않았는지 확인합시다.

학생 관리 애플리케이션을 열어주세요. StudentsSlice.js 파일에서 리듀서 studentAdded를 강의에서 보여준 것처럼 {reducer, prepare} 객체 형태로 다시 작성하세요.

NewStudentForm.jsx 파일에 강의에서 보여준 것과 같이 해당 변경 사항을 적용하세요. 애플리케이션을 실행하고 모든 것이 이전과 같이 작동하는지 확인하세요.