Redux에서 판매자 데이터 가져오기

우리 애플리케이션을 제품과 함께 실행해 봅시다. 제품 카드에 판매자가 표시되지 않는 것을 볼 수 있습니다. 서버에서 판매자 데이터를 가져와 이 데이터를 표시해 봅시다. 이를 위해서는 이미 익숙한 작업 순서를 수행해야 합니다.

먼저 server.js 파일을 엽니다. handlers 배열을 찾아 (제품에 대한 GET 처리 다음에) GET 요청 처리를 하나 더 추가합니다. 보시다시피 거의 동일합니다:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

서버에서 요청을 처리했습니다. 다음 단계로 sellersSlice.js 파일에서 서버에서 데이터를 가져오는 thunk를 작성해야 합니다. 이를 위해 client와 createAsyncThunk를 import 합니다:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

이제 서버에서 판매자를 가져올 것이므로 initialState에서 제거하고 빈 대괄호만 남겨둡니다:

const initialState = []

그런 다음 sellersSlice 함수 앞에 우리의 thunk fetchSellers를 생성합니다. 클라이언트에 서버에 지정한 경로를 전달합니다:

export const fetchSellers = createAsyncThunk(
	'sellers/fetchSellers',
	async () => {
		const response = await client.get('/fakeServer/sellers')
		return response.data
	}
)

이제 sellersSlice에 추가 리듀서를 생성하기만 하면 됩니다. 여기서는 성공적인 요청 처리로 제한합니다. fetchSellers에 의해 생성된 모든 액션은 fetchProducts의 액션과 동일합니다:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

지난번에 제품을 가져올 때 현재 상태 값을 변경했던 것을 상기시켜 드립니다. 여기서는 약간 다른 방법을 사용하여 새 값을 반환했는데, createSlice에서도 이렇게 할 수 있습니다. 이를 통해 두 가지 목표를 달성했습니다. 첫째, 데이터를 얻었고, 둘째, 이제 슬라이스를 action.payload 값으로 완전히 덮어썼기 때문에 판매자 목록에 다른 것이 추가될 위험이 없습니다.

학생 애플리케이션을 엽니다. server.js 파일을 열고, handlers 배열에 교사에 대한 GET 요청 핸들러를 하나 더 추가하세요.

이제 teachersSlice.js 파일을 엽니다. 수업에서 보여준 대로 initialState를 빈 배열로 만드세요. studentsSlice 함수 앞에 thunk fetchTeachers를 작성하세요.

createSlice 함수에 추가 리듀서를 작성하고, 성공적인 요청 처리로만 제한하세요.