Redux-da satyjylaryň maglumatlaryny almak

Hözirki önümlerimiz bilen programmany işledeli. Önüm kartlarynda satyjylar görkezilmeýändigini görýäris. Olary serwerden alyp, bu maglumatlary çykaryş etmek üçin çalt hereket etmeli. Bunuň üçin bize eýýäm tanyş bolan hereketleriň yzygiderligini ýerine ýetirmeli.

Ilki bilen server.js faýlyny açalyň. handlers massiwini tapyň we onuň içine ýene bir GET haýyşyny işleýän kod goşuň (önümler üçin GET işlenenden soň). Görşüňiz ýaly, olaryň ikisi-de takmyň birmeňzeş:

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

Serwerdäki haýyşy işledik. Indiki ädimde, sellersSlice.js faýlynda serwerden maglumat almak üçin thunk ýazmaly. Bunuň üçin oňa client we createAsyncThunk import etmeli:

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

Indi biz satyjylary serwerden alarys, şonuň üçin olary initialState-dan aýyryp, diňe boş ýazygy goýalyň:

const initialState = []

Indi bolsa, sellersSlice funksiýasyndan öň öz thunk-ymyzy fetchSellers döredeli. Klient üçin serwerde görkezen ýolymyzy görkezeli:

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

Bize ýene bir sellersSlice üçin goşmaça reducer döretmek galdı. Bu ýerde üstünlikli haýyşy işlemek bilen çäkleneris. fetchSellers tarapyndan döredilýän ähli hereketler, fetchProducts hereketlerine meňzeş bolar:

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

Ýatladyp geçýänim ýaly, öňki gezek önümleri alanyňyzda häzirki ýagdaýyň bahasyny üýtgetdik. Bu ýerde bolsa, birneme başga ýolaýlaw ýöredip, diňe täze bahany gaýtardyk, createSlice-da hem şeýle edip bolýar. Şeýlelik bilen, iki maksada ýetdik. Birinjiden, maglumatlary aldyk, ikinjiden, indi satyjylaryň sanawynda başga zat peýda bolmazlygyna göz ýetirdik, sebäbi biz slaysy doly action.payload bahasy bilen ýazdyk.

Talyp programmaňyzy açyň. Onda server.js faýlyny açyň, handlers massiwine okuwçylar üçin ýene bir GET haýyşyny işleýän kod goşuň.

Indi bolsa teachersSlice.js faýlyny açyň. initialState-y sapakda görkezilişi ýaly boş massiw ediň. studentsSlice funksiýasyndan öň fetchTeachers thunk-yny ýazyň.

createSlice funksiýasynda goşmaça reducer ýazyň, üstünlikli haýyşy işlemek bilen çäkleniň.