Reduxda Sotuvchilar Ma'lumotlarini Olish

Keling, ilovamizni mahsulotlar bilan ishga tushiramiz. Biz ko'ramizki, mahsulot kartalarida sotuvchilar ko'rsatilmayapti. Keling, ularni serverdan olamiz va ushbu ma'lumotlarni chiqaramiz. Buning uchun bizga allaqachon tanish bo'lgan harakatlar ketma-ketligini amalga oshirish kerak bo'ladi.

Boshlash uchun server.js faylini ochamiz. handlers massivini topamiz va unga yana bir GET-so'rovini qayta ishlashni qo'shamiz (mahsulotlar uchun GET-ni qayta ishlagandan keyin). Ko'rib turganingizdek, ular deyarli bir xil:

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

Serverdagi so'rovni biz qayta ishladik. Keyingi bosqichda sellersSlice.js faylida serverdan ma'lumot olish uchun thunk yozishimiz kerak. Buning uchun unga client va createAsyncThunk ni import qilamiz:

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

Endi biz sotuvchilarni serverdan olamiz, shuning uchun ularni initialState dan olib tashlaymiz, faqat bo'sh qavslarni qoldiramiz:

const initialState = []

Va keyin sellersSlice funktsiyasidan oldin bizning fetchSellers thunkimizni yaratamiz. Clientga biz serverda ko'rsatgan yo'lni beramiz:

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

Biz faqat sellersSlice uchun qo'shimcha reducer yaratishimiz kerak. Bu yerda faqat muvaffaqiyatli so'rovni qayta ishlash bilan cheklanamiz. fetchSellers tomonidan yaratilgan barcha actionlar, fetchProducts actionlariga o'xshash bo'ladi:

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

Esingizda bo'lsin, oxirgi marta mahsulotlarni olishda biz state ning joriy qiymatini o'zgartirdik. Bu yerda biz boshqa yo'ldan foydalandik va shunchaki yangi qiymatni qaytardik, createSlice da ham shunday qilish mumkin. Shu bilan biz ikkita maqsadga erishdik. Birinchidan, biz ma'lumotlarni oldik, ikkinchidan, endi bizda sotuvchilar ro'yxatida boshqa narsalar paydo bo'lmasligi kafolati bor, chunki biz butunlay slice ni action.payload qiymati bilan almashtirdik.

Talabalar bilan bo'lgan ilovingizni oching. Undagi server.js faylini oching, handlers massiviga o'qituvchilar uchun yana bitta GET-so'rovini qayta ishlovchini qo'shing.

Endi teachersSlice.js faylini oching. initialState ni bo'sh massiv qiling, dersda ko'rsatilgandek. studentsSlice funktsiyasidan oldin fetchTeachers thunkini yozing.

createSlice funktsiyasiga qo'shimcha reducer yozing, faqat muvaffaqiyatli so'rovni qayta ishlash bilan cheklaning.