Redux में Thunks का परिचय

पिछले अध्याय में हमने डेटा के आदान-प्रदान के लिए सर्वर, डेटाबेस और क्लाइंट का काम आयोजित किया। अब हमें अंतिम पुल बनाने की आवश्यकता है जो हमारे 'सिंक्रोनस' संगठित Redux एप्लिकेशन को अतुल्यकालिक क्लाइंट के साथ बातचीत करने में मदद करेगा, जिसे हमने पिछले अध्याय के अंतिम पाठ में बनाया था, ताकि अनुरोध भेजे जा सकें और प्रतिक्रिया में आवश्यक डेटा प्राप्त किया जा सके।

जैसा कि हमें पिछले भाग के पहले पाठों से याद है, Redux अतुल्यकालिक तर्क के साथ काम करने के बारे में कुछ नहीं जानता है और इसके लिए हम thunk middleware का उपयोग करेंगे। यह middleware भेजे गए actions के साथ काम करने की अनुमति देता है, हमारे thunk कोड में store के dispatch और getState विधियों का उपयोग करने की अनुमति देता है, और dispatch विधि को केवल सामान्य JS ऑब्जेक्ट्स के साथ ही नहीं, बल्कि फ़ंक्शन और प्रॉमिस जैसी इकाइयों के साथ काम करने में भी मदद करता है।

आमतौर पर thunk-फ़ंक्शन को दो तर्कों dispatch और getState (आवश्यकता पड़ने पर) के साथ बुलाया जाता है, जिनका उपयोग इस फ़ंक्शन के बॉडी में किया जा सकता है। इसकी मदद से सामान्य एक्शन भेजे जा सकते हैं। इसे store.dispatch के माध्यम से भी भेजा जा सकता है। ऐसे फ़ंक्शन का उदाहरण नीचे दिया गया है:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`पुराना रंग: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`नया रंग: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

आइए अब उत्पादों वाला हमारा एप्लिकेशन खोलें। पहली चीज जो हमें एप्लिकेशन शुरू होने पर सर्वर से प्राप्त करनी है - वह उत्पादों की सूची है। चूंकि आमतौर पर thunks स्लाइस-फाइलों में लिखे जाते हैं, इसलिए हम फाइल productsSlice.js खोलेंगे।

खुशखबरी यह है कि हमें Redux Thunk इंस्टॉल करने की जहमत नहीं उठानी होगी, क्योंकि RTK से configureStore फ़ंक्शन पहले से ही यह हमारे लिए कर देगा। इसलिए बस फाइल में आयात में createAsyncThunk जोड़ दें:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

आइए अपने क्लाइंट को भी आयात में जोड़ें:

import { client } from '../../api/client'

और अब createAsyncThunk की मदद से उत्पादों को प्राप्त करने के लिए हमारा पहला thunk बनाएं, इसे initialState ऑब्जेक्ट की घोषणा के तुरंत बाद करें:

export const fetchProducts = createAsyncThunk()

createAsyncThunk पहला पैरामीटर के रूप में उत्पन्न किए जाने वाले action के प्रकार के लिए एक स्ट्रिंग लेगा, और दूसरे के रूप में - payload के लिए कॉलबैक-फ़ंक्शन, जो परिणामस्वरूप या तो डेटा लौटाएगा, या त्रुटि के साथ प्रॉमिस (फाइल client.js देखें)। फ़ंक्शन के कोड में हम client.get को कॉल करते हैं और उसे वह पथ पास करते हैं, जो हमने सर्वर पर निर्दिष्ट किया था (सर्वर में http.get द्वारा स्वीकार किए गए पैरामीटर देखें server.js):

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

छात्रों वाला आपका एप्लिकेशन खोलें। उसमें studentsSlice.js फाइल खोलें। उसमें thunk बनाने के लिए createAsyncThunk फ़ंक्शन आयात करें, और सर्वर पर API अनुरोध भेजने के लिए client भी।

initialState ऑब्जेक्ट की घोषणा के तुरंत बाद createAsyncThunk की मदद से thunk बनाएं fetchStudents छात्रों की सूची प्राप्त करने के लिए, जो GET-अनुरोध भेजेगा पते /fakeServer/students पर, जो आपके फाइल server.js में निर्दिष्ट है, और लौटाएगा response.data, जैसा कि पाठ की सामग्री में दिखाया गया है। createAsyncThunk के लिए पहले पैरामीटर के रूप में स्ट्रिंग students/fetchStudents action के प्रकार के लिए निर्दिष्ट करें।