Добијање података о продавцима у 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. Ограничимо се овде на обраду успешног захтева. Сви action-и, генерисани од стране fetchSellers, биће идентични action-има 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, ограничите се на обраду успешног захтева.