Добивање на податоци за продавачи во 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 тоа е можно. На тој начин постигнавме две цели. Прво, ги добивме податоците, а второ, сега имаме гаранција дека во листата на продавачи нема да се појави нешто друго, бидејќи целосно ја пребришавме таблата со вредноста action.payload.

Отворете ја вашата апликација со студенти. Отворете ја во неа датотеката server.js, додадете во низата handlers уште еден обработувач за GET-барање на предавачи.

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

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