Pārdevēju datu iegūšana Redux

Palaismiet mūsu lietotni ar produktiem. Mēs redzam, ka produktu kartītēs netiek rādīti pārdevēji. Iegūsim tos no servera un izvadīsim šos datus. Lai to izdarītu, mums būs jāveic jau pazīstama darbību secība.

Sākumā atveriet failu server.js. Atrodiet massīvu handlers un pievienojiet tam vēl vienu GET pieprasījuma apstrādi (pēc produktu GET apstrādes). Kā redzat, tā ir gandrīz identiska:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

Mēs apstrādājām pieprasījumu serverī. Nākamais posms ir failā sellersSlice.js jāuzraksta thunk datu iegūšanai no servera. Lai to izdarītu, importējiet tajā client un createAsyncThunk:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

Tagad mēs iegūsim pārdevējus no servera, tāpēc noņemsim tos no initialState, atstājot tikai tukšas iekavas:

const initialState = []

Un pēc tam pirms funkcijas sellersSlice izveidosim mūsu thunk fetchSellers. Klientam mēs nodosim ceļu, ko norādījām serverī:

export const fetchSellers = createAsyncThunk(
	'sellers/fetchSellers',
	async () => {
		const response = await client.get('/fakeServer/sellers')
		return response.data
	}
)

Mums atliek tikai sellersSlice izveidot papildu reducer. Ierobežosimies ar veiksmīga pieprasījuma apstrādi. Visas darbības, ko ģenerē fetchSellers, būs identiskas fetchProducts darbībām:

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

Atgādināšu, ka pagājušajā reizē, iegūstot produktus, mēs mainījām pašreizējo stāvokļa vērtību. Šeit mēs izmantojām nedaudz atšķirīgu ceļu un vienkārši atgriezām jauno vērtību, jo arī createSlice to var izdarīt. Tādējādi mēs sasniedzām divus mērķus. Pirmkārt, mēs ieguvām datus, un, otrkārt, tagad mums ir garantija, ka pārdevēju sarakstā ne parādīsies kaut kas cits, jo mēs pilnībā pārrakstījām slice ar vērtību action.payload.

Atveriet savu lietotni ar studentiem. Atveriet tajā failu server.js, pievienojiet massīvam handlers vēl vienu apstrādātāju lektoru GET pieprasījumam.

Un tagad atveriet failu teachersSlice.js. Padariet initialState par tukšu masīvu, kā parādīts nodarbībā. Pirms funkcijas studentsSlice uzrakstiet thunk fetchTeachers.

Funkcijā createSlice papildiniet ar papildu reducer, ierobežojieties ar veiksmīga pieprasījuma apstrādi.