Получение данных продавцов в 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 { 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 допишите
дополнительный редьюсер, ограничьтесь
обработкой успешного запроса.