Фурӯсандаҳо дар 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 редюсери иловагӣ эҷод кардан лозим аст. Мо дар ин ҷо коркарди дархости муваффақиятро маҳдуд мекунем. Ҳама action-ҳо, ки аз ҷониби fetchSellers тавлид мешаванд, ба action-ҳои fetchProducts монанданд:

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

Ёддиҳӣ мекунам, ки дафъаи гузашта вақти гирифтани маҳсулот мо арзиши ҷории стейтро тағир додем. Дар ин ҷо мо роҳи каме дигарро истифода кардем ва танҳо арзиши навро баргардондем, ҳамин тавр дар createSlice ҳам имконпазир аст. Бо ин роҳ мо ба ду мақсад ноил шудем. Аввалан, мо маълумот гирифтем, ва дуввуман, акнун мо кафолат дорем, ки дар рӯйхати фурӯсандаҳо чизи дигаре пайдо намешавад, зеро мо пурра слайсро бо арзиши action.payload навиштем.

Барномаи худро бо донишҷӯён кушоед. Дар он файли server.js кушоед, ба handlers як обработчики дигарро илова кунед барои дархости GET-и муаллимон.

Ва акнун файли teachersSlice.js кушоед. initialState-ро массивҳои холӣ кунед, тавре ки дар дарс нишон дода шуд. Пеш аз функсияи studentsSlice thunk-и fetchTeachers нависед.

Дар функсияи createSlice редюсери иловагиро илова кунед, худро ба коркарди дархости муваффақият маҳдуд кунед.