Satıcıların məlumatlarını Redux-da əldə etmək

Gəlin proqramımızı məhsullarla işə salaq. Görürük ki, məhsul kartlarında satıcılar göstərilmir. Gəlin onları serverdən əldə edək və bu məlumatları çıxaraq. Bunun üçün biz artıq tanış olduğumuz ardıcıllığı yerinə yetirməliyik.

Əvvəlcə server.js faylını açaq. handlers massivini tapaq və ona daha bir GET sorğusunun emalını əlavə edək (məhsullar üçün GET emalından sonra). Gördüyünüz kimi, o demək olar ki eynidir:

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

Serverdə sorğunu emal etdik. Növbəti mərhələdə biz sellersSlice.js faylında serverdən məlumat əldə etmək üçün thunk yazmalıyıq. Bunun üçün ona client və createAsyncThunk import etməliyik:

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

İndi biz satıcıları serverdən əldə edəcəyik, ona görə də onları initialState-dən çıxaraq, sadəcə boş mötərizə qoyaq:

const initialState = []

Və sonra sellersSlice funksiyasından əvvəl bizim thunk-ı fetchSellers yaradaq. Client-ə biz serverdə göstərdiyimiz yolu ötürəcəyik:

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

Bizim üçün yalnız sellersSlice üçün əlavə reducer yaratmaq qalıb. Burada uğurlu sorğunun emalı ilə məhdudlaşaq. fetchSellers tərəfindən yaradılan bütün action-lar, fetchProducts-ın action-ları ilə eyni olacaq:

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

Xatırladım ki, keçən dəfə məhsulları əldə edərkən biz cari state dəyərini dəyişirdik. Burada biz bir qədər fərqli yoldan istifadə etdik və sadəcə yeni dəyəri qaytardıq, çünki createSlice-da da bu mümkündür. Bununla biz iki məqsədə nail olduq. Birincisi, biz məlumatları əldə etdik, ikincisi, indi bizim satıcılar siyahısında başqa bir şeyin peyda olmayacağına zəmanətəmiz var, çünki biz tamamilə slice-ı action.payload dəyəri ilə yenidən yazdıq.

Tələbələr üçün olan proqramınızı açın. Orada server.js faylını açın, handlers massivinə müəllimlər üçün daha bir GET sorğusu emalı əlavə edin.

İndi teachersSlice.js faylını açın. initialState-i dərsdə göstərildiyi kimi boş massiv edin. studentsSlice funksiyasından əvvəl thunk fetchTeachers yazın.

createSlice funksiyasında əlavə reducer yazın, uğurlu sorğunun emalı ilə məhdudlaşın.