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

← →
↑