Upataji wa Data ya Wauzaji kwenye Redux

Wacha tianzishe programu yetu na bidhaa. Tunaona kuwa kwenye kadi za bidhaa hauonyeshwi wauzaji. Wacha tupate kutoka kwa seva na tuonyeshe data hii. Kwa hili itabidi tufanye mlolongo wa hatua tayari unajulikana kwa sisi.

Kuanza, wacha tufungue faili server.js. Tupate safu handlers na tuongeze ndani yake usindikaji mwingine wa ombi la GET (baada ya usindikaji wa GET kwa bidhaa). Kama unavyoona ni karibu sawa:

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

Tumeshindikania ombi kwenye seva. Hatua inayofuata tunapaswa kwenye faili sellersSlice.js kuandika thunk ya kupata data kutoka kwenye seva. Kwa hii tuingize ndani yake client na createAsyncThunk:

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

Sasa tutapata wauzaji kutoka kwa seva, kwa hivyo tutawaondoa kwenye initialState, tukiachie maadili mabaki tu:

const initialState = []

Na kisha kabla ya kitendakazi sellersSlice tuunda thunk yetu fetchSellers. Kwa mteja tutapeleka njia, tuliyoainisha kwenye seva:

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

Imetubakia tu kwa sellersSlice kuunda reducer ya ziada. Tujiweke kikomo hapa kwenye usindikaji wa ombi lililofanikiwa. Vitendo vyote, vinavyoletwa na fetchSellers, vitakuwa sawa na vitendo vya fetchProducts:

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

Nakukumbusha, kwamba wakati uliopata bidhaa tulibadilisha thamani ya sasa ya hali. Hapa sisi tumetumia njia tofauti kidogo na tu tumerudisha thamani mpya, kwa hivyo kwenye createSlice pia inawezekana. Kwa hivyo tumefanikisha malengo mawili. Kwanza, tulipata data, na pili, sasa tuna hakika, kwamba kwenye orodha ya wauzaji haitakuwa na kitu kingine, kwa sababu tumekabidhi kabisa kipande cha hali kwa thamani ya action.payload.

Fungua programu yako na wanafunzi. Fungua ndani yake faili server.js, ongeza kwenye safu handlers kisindikaji kingine kwa ombi la GET la walimu.

Na sasa fungua faili teachersSlice.js. Fanya initialState kuwa safu tupu, kama inavyoonyeshwa kwenye somo. Kabla ya kitendakazi studentsSlice andika thunk fetchTeachers.

Kwenye kitendakazi createSlice andika reducer ya ziada, jiweke kikomo kwenye usindikaji wa ombi lililofanikiwa.