Получение данных продавцов в 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:

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.