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 के लिए एक अतिरिक्त रिड्यूसर बनाना बाकी है। यहां हम सफल अनुरोध के प्रसंस्करण तक सीमित रहेंगे। fetchSellers द्वारा जेनरेट किए गए सभी एक्शन, 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 फ़ंक्शन में अतिरिक्त रिड्यूसर जोड़ें, सफल अनुरोध के प्रसंस्करण तक सीमित रहें।