Redux에서 thunk를 사용한 데이터 전송

지난 수업에서 우리는 가짜 서버에서의 POST 요청 처리를 살펴보았습니다. 이제 서버로 요청을 보낼 thunk 함수를 작성해 보겠습니다.

우리의 제품 애플리케이션을 열고, 그 안의 productsSlice.js 파일을 열겠습니다. 이제 fetchProducts thunk 다음에 createAsyncThunk를 사용하여 addProduct thunk를 생성하겠습니다:

export const addProduct = createAsyncThunk()

createAsyncThunk의 첫 번째 매개변수로 'products/addProduct'를 전달하고, 두 번째 매개변수로는 새로운 제품의 데이터 객체를 받는 비동기 콜백을 전달합니다:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

이 콜백 코드 내에서 클라이언트를 호출하고, 경로와 제품 객체를 매개변수로 전달한 다음, 응답 데이터를 반환합니다:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

이제 아래 코드에서 productsSlice에 대한 reducers 필드를 살펴보겠습니다. 이전에는 reducer와 prepare 메서드를 가진 productAdded 리듀서를 사용하여 새 제품을 추가했습니다. 이제 우리는 서버에서 필요한 데이터를 생성하고 thunk를 사용하므로, 여기서 productAdded 리듀서를 완전히 코드에서 제거하겠습니다. 그런 다음 extraReducers 메서드(코드의 끝)에 요청이 성공했을 때 액션의 payload에서 직접 새 제품을 products 슬라이스에 추가할 추가 리듀서를 하나 더 입력하겠습니다 (이러한 코드는 독보적인 createSlice 덕분에 가능하다는 점을 기억하세요):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

그런데, import 문에서 nanoid를 제거하는 것과 파일 끝의 액션 export에서 productAdded를 제거하는 것을 잊지 마세요.

학생들을 다루는 애플리케이션을 열어주세요. 그 안의 studentsSlice.js 파일을 열어주세요. createAsyncThunk를 사용하여 수업에서 보여준 것처럼 새 학생을 추가하기 위해 POST 요청을 보낼 또 다른 thunk addStudent를 생성하세요.

다음으로 아래에서 studentsSlice에 대한 변경 사항을 적용하세요: reducers 속성 내의 studentAdded 리듀서를 완전히 제거하세요. 그리고 extraReducers 필드에 수업에서 보여준 것처럼 요청이 성공했을 때 액션의 payload에서 students 슬라이스에 새 학생을 추가할 추가 리듀서를 입력하세요.