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

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

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

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

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

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

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

sellers/sellersSlice.jsconst initialState = []

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

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

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

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

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