Redux의 리듀서와 액션

지난 강의에서 우리는 제품 추가를 위한 양식을 완성하고 메인 페이지에 표시했습니다. 하지만 추가된 데이터는 아직 저장되지 않고, 즉 새로운 제품이 store의 기존 제품들에 추가되지 않습니다. 이를 수정해 봅시다.

먼저 우리의 제품 애플리케이션에서 파일 productsSlice.jsx를 열고 createSlice의 reducer 속성에 productAdded 함수를 작성하겠습니다. 이 함수는 전달된 현재 상태와 액션을 기반으로 store에 제품을 추가하는 역할을 합니다. 여기서는 전체 state가 아닌 제품을 담당하는 부분만 전달된다는 점에 유의해야 합니다 (슬라이스 products는 이 부분만 알고 있습니다). 새 제품 객체는 양식에서 저장 버튼을 클릭할 때 핸들러가 생성하는 action 객체의 payload 속성에 위치할 것입니다. 결과적으로 리듀서 productAdded는 createSlice 코드에서 다음과 같이 보일 것입니다:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

그럼 액션은 어떻게 될까요? 튜토리얼 초반에 우리는 액션이 애플리케이션에서 발생한 일을 설명하는 객체 형태의 어떤 이벤트라고 언급했습니다. 또한 다음과 같이 그러한 객체를 생성해 줄 action creator 함수를 사용할 수 있다고도 말했습니다:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

좋은 소식은 우리가 아무것도 할 필요가 없으며, 이것을 우리가 사용하는 createSlice 함수가 대신 처리해 준다는 것입니다. 우리가 reducer를 작성하자마자, 이 함수는 동일한 이름의 action creator를 자동으로 생성해 줍니다. 우리는 얻어진 action creator를 컴포넌트에서 이후 사용하기 위해 내보내기만 하면 됩니다. 파일 끝부분에서 리듀서를 내보내기 전에 다음과 같이 해 봅시다:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

여러분의 학생 애플리케이션을 열고, 그다음 파일 studentsSlice.jsx를 열어 createSlice의 reducer 필드 값을 강의에서 보여준 대로 작성하세요.

파일 studentsSlice.jsx 끝부분에 얻어진 action creator 함수를 내보내기 추가하세요.