გამყიდველების მონაცემების მიღება 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-სთვის დამატებითი reducer-ის შექმნა გვრჩება. აქ შემოვიფარგლოთ წარმატებული მოთხოვნის დამუშავებით. ყველა action, რომელსაც გენერირებს fetchSellers, იდენტური იქნება fetchProducts-ის action-ების:

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

შეგახსენებთ, რომ წინა შემთხვევაში პროდუქტების მიღებისას ჩვენ ვცვლიდით state-ის მიმდინარე მნიშვნელობას. აქ ჩვენ გამოვიყენეთ ოდნავ განსხვავებული გზა და უბრალოდ დავაბრუნეთ ახალი მნიშვნელობა, რადგან createSlice-შიც შეიძლება ასე. ამით ჩვენ მივაღწიეთ ორ მიზანს. პირველ რიგში, ჩვენ მივიღეთ მონაცემები, ხოლო მეორეც, ახლა ჩვენ გვაქვს გარანტია, რომ გამყიდველების სიაში არ გამოჩნდება რაიმე დამატებითი, რადგან ჩვენ მთლიანად გადავწერეთ slice action.payload-ის მნიშვნელობით.

გახსენით თქვენი აპლიკაცია სტუდენტებით. გახსენით მასში ფაილი server.js, დაამატეთ მასივში handlers კიდევ ერთი დამმუშავებელი ლექტორების GET-მოთხოვნისთვის.

ახლა კი გახსენით ფაილი teachersSlice.js. გახადეთ initialState ცარიელი მასივი, როგორც ეს ნაჩვენებია გაკვეთილზე. ფუნქციის studentsSlice წინ დაწერეთ thunk fetchTeachers.

ფუნქციაში createSlice დაწერეთ დამატებითი reducer, შემოიფარგლეთ წარმატებული მოთხოვნის დამუშავებით.