Извличане на данни за продавачи в 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 да създадем допълнителен reducer. Ще се ограничим тук с обработката на успешна заявка. Всички екшъни, генерирани от fetchSellers, ще бъдат идентични на екшъните от fetchProducts:

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

Напомням, че последния път при получаване на продукти ние променяхме текущата стойност на state. Тук ние използвахме малко по-различен подход и просто върнахме нова стойност, така в createSlice също е възможно. По този начин постигнахме две цели. Първо, получихме данните, и второ, сега имаме гаранция, че в списъка с продавачи няма да се появи нещо друго, тъй като напълно презаписахме slice със стойността action.payload.

Отворете вашето приложение със студенти. Отворете в него файла server.js, добавете в масива handlers още един обработчик за GET заявка на преподаватели.

А сега отворете файла teachersSlice.js. Направете initialState празен масив, както е показано в урока. Преди функцията studentsSlice напишете thunk fetchTeachers.

Във функцията createSlice допишете допълнителен reducer, ограничете се до обработката на успешна заявка.