Redux टूलकिट प्रभावी Redux विकास के लिए एक उपकरण के रूप में

वर्तमान में, Redux लाइब्रेरी का उपयोग करके प्रतिक्रिया ढांचे के आधार पर शेर के वेब अनुप्रयोगों का हिस्सा विकसित किया जा रहा है। यह पुस्तकालय FLUX वास्तुकला का सबसे लोकप्रिय कार्यान्वयन है और कई स्पष्ट लाभों के बावजूद, इसके बहुत महत्वपूर्ण नुकसान हैं, जैसे:

• कोड लिखने और व्यवस्थित करने के लिए अनुशंसित पैटर्न की जटिलता और "वर्बोसिटी", जो बड़ी संख्या में बॉयलरप्लेट की आवश्यकता होती है;
• अतुल्यकालिक व्यवहार और साइड इफेक्ट्स के लिए अंतर्निहित नियंत्रणों की कमी, जिसके कारण तीसरे पक्ष के डेवलपर्स द्वारा लिखित विभिन्न प्रकार के ऐड-ऑन से सही उपकरण चुनने की आवश्यकता होती है।

इन कमियों को दूर करने के लिए, Redux डेवलपर्स ने Redux Toolkit लाइब्रेरी की शुरुआत की। यह उपकरण Redux का उपयोग करके अनुप्रयोग विकास को सरल बनाने के लिए तैयार किए गए व्यावहारिक समाधानों और विधियों का एक समूह है। इस लाइब्रेरी के डेवलपर्स ने Redux के उपयोग के विशिष्ट मामलों को सरल बनाने का लक्ष्य रखा। यह उपकरण Redux का उपयोग करने के प्रत्येक संभावित मामलों में एक सार्वभौमिक समाधान नहीं है, लेकिन यह आपको उस कोड को सरल बनाने की अनुमति देता है जिसे डेवलपर को लिखना होगा।

इस लेख में, हम Redux टूलकिट में शामिल मुख्य उपकरणों के बारे में बात करेंगे, और यह भी, हमारे आंतरिक अनुप्रयोग के एक टुकड़े का एक उदाहरण का उपयोग करके, उन्हें मौजूदा कोड में उपयोग करने का तरीका दिखाएं।

पुस्तकालय के बारे में संक्षेप में

Redux टूलकिट का सारांश:

• जारी करने से पहले, लाइब्रेरी को रेडक्स-स्टार्टर-किट कहा जाता था;
• रिलीज़ अक्टूबर 2019 के अंत में हुई;
• पुस्तकालय आधिकारिक तौर पर Redux डेवलपर्स द्वारा समर्थित है।

डेवलपर्स के अनुसार, Redux Toolkit निम्नलिखित कार्य करता है:

• Redux का उपयोग करके आपको जल्दी से आरंभ करने में मदद करता है।
• विशिष्ट कार्यों और Redux कोड के साथ काम को सरल करता है;
• आप डिफ़ॉल्ट रूप से Redux की सर्वोत्तम प्रथाओं का उपयोग करने की अनुमति देता है;
• बॉयलरप्लेट के अविश्वास को कम करने वाले समाधान प्रदान करता है।

Redux टूलकिट विशेष रूप से डिज़ाइन किए गए दोनों का एक सेट प्रदान करता है और कई सिद्ध उपकरण जोड़ता है जो आमतौर पर Redux के साथ संयोजन में उपयोग किए जाते हैं। यह दृष्टिकोण डेवलपर को यह तय करने की अनुमति देता है कि उनके आवेदन में कैसे और कौन से उपकरण का उपयोग करना है। इस लेख के पाठ्यक्रम में, हम ध्यान देंगे कि यह पुस्तकालय कौन से उधार का उपयोग करता है। Redux टूलकिट की अधिक जानकारी और निर्भरता के लिए, @ reduxjs / टूलकिट पैकेज विवरण देखें।

Redux टूलकिट लाइब्रेरी द्वारा प्रदान की जाने वाली सबसे महत्वपूर्ण विशेषताएं हैं:

• #configureStore - स्टोरेज बनाने और कॉन्फ़िगर करने की प्रक्रिया को सरल बनाने के लिए डिज़ाइन किया गया एक फंक्शन;
• #createReducer - एक फ़ंक्शन जो संक्षिप्त रूप से और स्पष्ट रूप से वर्णन करने और एक reducer बनाने में मदद करता है;
• #createAction - कार्रवाई के प्रकार के निर्दिष्ट स्ट्रिंग के लिए कार्रवाई के निर्माता का कार्य लौटाता है;
• #createSlice - createAction और createReducer की कार्यक्षमता को जोड़ती है;
• createSelector रेसेलेट लाइब्रेरी से एक फ़ंक्शन है, उपयोग में आसानी के लिए फिर से निर्यात किया जाता है ।

यह भी ध्यान देने योग्य है कि Redux टूलकिट पूरी तरह से टाइपस्क्रिप्ट के साथ एकीकृत है। अधिक जानकारी के लिए, आधिकारिक दस्तावेज़ के टाइपस्क्रिप्ट अनुभाग के साथ उपयोग देखें।

आवेदन

Redux टूलकिट लाइब्रेरी का उपयोग करने पर विचार करें जो वास्तव में उपयोग किए जाने वाले रिएक्ट Redux एप्लिकेशन के टुकड़े के उदाहरण के रूप में है।
नोट। लेख में आगे, स्रोत कोड को Redux टूलकिट का उपयोग किए बिना और इसका उपयोग किए बिना दोनों प्रस्तुत किया जाएगा, जो इस पुस्तकालय का उपयोग करने के सकारात्मक और नकारात्मक पहलुओं का बेहतर मूल्यांकन करने की अनुमति देगा।

कार्य

हमारे आंतरिक अनुप्रयोगों में, हमारे सॉफ़्टवेयर उत्पादों की रिलीज़ के बारे में जानकारी जोड़ने, संपादित करने और प्रदर्शित करने की आवश्यकता थी। इनमें से प्रत्येक क्रिया के लिए, अलग-अलग एपीआई फ़ंक्शंस विकसित किए गए थे, जिसके परिणामों को Redux स्टोर में जोड़ना आवश्यक है। अतुल्यकालिक व्यवहार और दुष्प्रभावों को नियंत्रित करने के साधन के रूप में, हम थंक का उपयोग करेंगे।

भंडारण सृजन

स्रोत कोड का प्रारंभिक संस्करण जो रिपॉजिटरी बनाता है, इस तरह दिखता है:

import { createStore, applyMiddleware, combineReducers, compose, } from 'redux'; import thunk from 'redux-thunk'; import * as reducers from './reducers'; const ext = window.__REDUX_DEVTOOLS_EXTENSION__; const devtoolMiddleware = ext && process.env.NODE_ENV === 'development' ? ext() : f => f; const store = createStore( combineReducers({ ...reducers, }), compose( applyMiddleware(thunk), devtoolMiddleware ) ); 

यदि आप ऊपर दिए गए कोड को ध्यान से देखते हैं, तो आप उन कार्यों का एक लंबा अनुक्रम देख सकते हैं जिन्हें पूरा किया जाना चाहिए ताकि भंडारण पूरी तरह से कॉन्फ़िगर हो जाए। Redux टूलकिट में इस प्रक्रिया को सरल बनाने के लिए डिज़ाइन किया गया टूल है, जिसका नाम है configStore फ़ंक्शन।

कॉन्फ़िगर करें फ़ंक्शन

यह उपकरण आपको Reducers को स्वचालित रूप से संयोजित करने की अनुमति देता है, Redux मिडलवेयर (डिफ़ॉल्ट में Redux-thunk) को शामिल करता है, और Redux DevTools एक्सटेंशन का भी उपयोग करता है। ConfigStore फ़ंक्शन इनपुट पैरामीटर के रूप में निम्न गुणों के साथ एक ऑब्जेक्ट को स्वीकार करता है:

• रिड्यूसर - कस्टम रिड्यूसर का एक सेट,
• मिडलवेयर - एक वैकल्पिक पैरामीटर जो रिपॉजिटरी से कनेक्ट करने के लिए डिज़ाइन किए गए मिडलवेयर की एक सरणी निर्दिष्ट करता है,
• devTools - एक तार्किक प्रकार पैरामीटर जो आपको ब्राउज़र में स्थापित Redux DevTools एक्सटेंशन को सक्षम करने की अनुमति देता है (डिफ़ॉल्ट मान सत्य है),
• preloadedState - एक वैकल्पिक पैरामीटर जो रिपॉजिटरी की प्रारंभिक स्थिति सेट करता है,
• एन्हांसर - एक वैकल्पिक पैरामीटर जो एम्पलीफायरों के एक सेट को परिभाषित करता है।

मिडलवेयर की सबसे लोकप्रिय सूची प्राप्त करने के लिए, आप विशेष फ़ंक्शन getDefaultMiddleware का उपयोग कर सकते हैं, जो Redux टूलकिट का भी हिस्सा है। यह फ़ंक्शन Redux टूलकिट लाइब्रेरी में डिफ़ॉल्ट रूप से सक्षम मिडलवेयर के साथ एक सरणी देता है। इन बिचौलियों की सूची उस मोड के आधार पर भिन्न होती है जिसमें आपका कोड निष्पादित होता है। उत्पादन मोड में, एक सरणी में केवल एक तत्व होता है - थंक। विकास मोड में, लेखन के समय, सूची को निम्न मिडलवेयर के साथ फिर से भरना है:

• serializableStateInvariant - Redux Toolkit में उपयोग के लिए विशेष रूप से विकसित एक उपकरण और गैर-धारावाहिक मूल्यों की उपस्थिति के लिए राज्य के पेड़ की जांच करने के लिए डिज़ाइन किया गया है, जैसे कि फ़ंक्शन, वादा, प्रतीक और अन्य मान जो सरल JS डेटा नहीं हैं;
• immutableStateInvariant - redux-immutable-state-invariant पैकेज से मिडलवेयर, स्टोरेज में मौजूद डेटा में म्यूटेशन का पता लगाने के लिए डिज़ाइन किया गया है।

मिडलवेयर की आरोही सूची को निर्दिष्ट करने के लिए, getDefaultMidlleware फ़ंक्शन एक ऑब्जेक्ट को स्वीकार करता है जो उनमें से प्रत्येक के लिए शामिल मिडलवेयर और सेटिंग्स की सूची को परिभाषित करता है। इस जानकारी पर अधिक जानकारी आधिकारिक दस्तावेज के संबंधित अनुभाग में पाई जा सकती है।

अब हम ऊपर वर्णित टूल का उपयोग करके रिपॉजिटरी बनाने के लिए जिम्मेदार कोड सेक्शन को फिर से लिखेंगे। परिणामस्वरूप, हमें निम्नलिखित मिलते हैं:

 import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; import * as reducers from './reducers'; const middleware = getDefaultMiddleware({ immutableCheck: false, serializableCheck: false, thunk: true, }); export const store = configureStore({ reducer: { ...reducers }, middleware, devTools: process.env.NODE_ENV !== 'production', }); 

कोड के इस भाग के उदाहरण का उपयोग करके, आप स्पष्ट रूप से देख सकते हैं कि configStore फ़ंक्शन निम्नलिखित समस्याओं को हल करता है:

• Reducers को संयोजित करने की आवश्यकता है, स्वचालित रूप से CombReducers को कॉल करना,
• मिडिलवेयर को संयोजित करने की आवश्यकता है, स्वचालित रूप से इनवॉइसिंग ऐप्लाइडवेयर

यह आपको Redux -devtools-extension पैकेज से कॉम्पोज़िथडेवटूल फ़ंक्शन का उपयोग करके Redux DevTools एक्सटेंशन को और अधिक आसानी से सक्षम करने की अनुमति देता है। उपरोक्त सभी इंगित करते हैं कि इस फ़ंक्शन का उपयोग करने से आप कोड को अधिक कॉम्पैक्ट और समझने योग्य बना सकते हैं।

यह भंडारण के निर्माण और विन्यास को पूरा करता है। हम इसे प्रदाता को हस्तांतरित करते हैं और चलते हैं।

क्रिया, एक्शन क्रिएटर और रेड्यूसर

अब चलो विकासशील कार्यों, एक्शन क्रिएटर्स और रेड्यूसर के संदर्भ में Redux टूलकिट की विशेषताओं को देखें। Redux टूलकिट का उपयोग किए बिना कोड का प्रारंभिक संस्करण कार्रवाई के रूप में व्यवस्थित किया गया था। js और reducers.js फाइलें। कार्यों की सामग्री। Js फ़ाइल इस तरह दिखती है:

 import * as productReleasesService from '../../services/productReleases'; export const PRODUCT_RELEASES_FETCHING = 'PRODUCT_RELEASES_FETCHING'; export const PRODUCT_RELEASES_FETCHED = 'PRODUCT_RELEASES_FETCHED'; export const PRODUCT_RELEASES_FETCHING_ERROR = 'PRODUCT_RELEASES_FETCHING_ERROR'; … export const PRODUCT_RELEASE_UPDATING = 'PRODUCT_RELEASE_UPDATING'; export const PRODUCT_RELEASE_UPDATED = 'PRODUCT_RELEASE_UPDATED'; export const PRODUCT_RELEASE_CREATING_UPDATING_ERROR = 'PRODUCT_RELEASE_CREATING_UPDATING_ERROR'; function productReleasesFetching() { return { type: PRODUCT_RELEASES_FETCHING }; } function productReleasesFetched(productReleases) { return { type: PRODUCT_RELEASES_FETCHED, productReleases }; } function productReleasesFetchingError(error) { return { type: PRODUCT_RELEASES_FETCHING_ERROR, error } } … export function fetchProductReleases() { return dispatch => { dispatch(productReleasesFetching()); return productReleasesService.getProductReleases().then( productReleases => dispatch(productReleasesFetched(productReleases)) ).catch(error => { error.clientMessage = "Can't get product releases"; dispatch(productReleasesFetchingError(error)) }); } } … export function updateProductRelease( id, productName, productVersion, releaseDate ) { return dispatch => { dispatch(productReleaseUpdating()); return productReleasesService.updateProductRelease( id, productName, productVersion, releaseDate ).then( productRelease => dispatch(productReleaseUpdated(productRelease)) ).catch(error => { error.clientMessage = "Can't update product releases"; dispatch(productReleaseCreatingUpdatingError(error)) }); } } 

Reduxers.js की सामग्री Redux टूलकिट का उपयोग करने से पहले फ़ाइल:

 const initialState = { productReleases: [], loadedProductRelease: null, fetchingState: 'none', creatingState: 'none', updatingState: 'none', error: null, }; export default function reducer(state = initialState, action = {}) { switch (action.type) { case productReleases.PRODUCT_RELEASES_FETCHING: return { ...state, fetchingState: 'requesting', error: null, }; case productReleases.PRODUCT_RELEASES_FETCHED: return { ...state, productReleases: action.productReleases, fetchingState: 'success', }; case productReleases.PRODUCT_RELEASES_FETCHING_ERROR: return { ...state, fetchingState: 'failed', error: action.error }; … case productReleases.PRODUCT_RELEASE_UPDATING: return { ...state, updatingState: 'requesting', error: null, }; case productReleases.PRODUCT_RELEASE_UPDATED: return { ...state, updatingState: 'success', productReleases: state.productReleases.map(productRelease => { if (productRelease.id === action.productRelease.id) return action.productRelease; return productRelease; }) }; case productReleases.PRODUCT_RELEASE_UPDATING_ERROR: return { ...state, updatingState: 'failed', error: action.error }; default: return state; } } 

जैसा कि हम देख सकते हैं, यह वह जगह है जहां अधिकांश बॉयलरप्लेट निहित है: एक्शन टाइप कॉन्स्टेंट, एक्शन क्रिएटर, कॉन्स्टेंट फिर से, लेकिन रिड्यूसर कोड में, यह सब कोड लिखने में समय लगता है। आप CreateAction और createReducer फ़ंक्शन का उपयोग करके आंशिक रूप से इस बॉयलरप्लेट से छुटकारा पा सकते हैं, जो Redux टूलकिट का भी हिस्सा हैं।

CreateAction फ़ंक्शन

कोड के दिए गए अनुभाग में, Redux में किसी क्रिया को परिभाषित करने के लिए मानक विधि का उपयोग किया जाता है: पहला, एक स्थिरांक को अलग से परिभाषित किया जाता है जो क्रिया के प्रकार को निर्धारित करता है, और फिर - इस प्रकार की क्रिया के निर्माता का कार्य। CreateAction फ़ंक्शन इन दो घोषणाओं को एक में जोड़ता है। इनपुट पर, यह एक कार्रवाई प्रकार लेता है और उस प्रकार के लिए कार्रवाई के निर्माता को वापस करता है। एक्शन क्रिएटर को या तो बिना तर्क के, या कुछ तर्क (पेलोड) के साथ बुलाया जा सकता है, जिसका मूल्य बनाए गए एक्शन के पेलोड फ़ील्ड में रखा जाएगा। इसके अलावा, एक्शन क्रिएटर स्ट्रोस्ट्रिंग () फ़ंक्शन को ओवरराइड करता है, ताकि एक्शन का प्रकार उसका स्ट्रिंग प्रतिनिधित्व बन जाए।

कुछ मामलों में, आपको पेलोड के मूल्य को समायोजित करने के लिए अतिरिक्त तर्क लिखने की आवश्यकता हो सकती है, उदाहरण के लिए, एक्शन निर्माता के लिए कई मापदंडों को स्वीकार करें, एक यादृच्छिक पहचानकर्ता बनाएं या वर्तमान टाइमस्टैम्प प्राप्त करें। ऐसा करने के लिए, createAction एक वैकल्पिक दूसरा तर्क लेता है - एक फ़ंक्शन जो पेलोड मान को अपडेट करने के लिए उपयोग किया जाएगा। इस पैरामीटर के बारे में अधिक जानकारी आधिकारिक दस्तावेज में पाई जा सकती है।
CreateAction फ़ंक्शन का उपयोग करके, हमें निम्न कोड मिलता है:

 export const productReleasesFetching = createAction('PRODUCT_RELEASES_FETCHING'); export const productReleasesFetched = createAction('PRODUCT_RELEASES_FETCHED'); export const productReleasesFetchingError = createAction('PRODUCT_RELEASES_FETCHING_ERROR'); … export function fetchProductReleases() { return dispatch => { dispatch(productReleasesFetching()); return productReleasesService.getProductReleases().then( productReleases => dispatch(productReleasesFetched({ productReleases })) ).catch(error => { error.clientMessage = "Can't get product releases"; dispatch(productReleasesFetchingError({ error })) }); } } ... 

CreateReducer फ़ंक्शन

अब reducer पर विचार करें। जैसा कि हमारे उदाहरण में, Reducers को अक्सर स्विच स्टेटमेंट का उपयोग करके कार्यान्वित किया जाता है, जिसमें प्रत्येक प्रकार की कार्रवाई के लिए एक रजिस्टर होता है। यह दृष्टिकोण अच्छी तरह से काम करता है, लेकिन बॉयलरप्लेट और त्रुटि प्रवण के बिना नहीं है। उदाहरण के लिए, डिफ़ॉल्ट स्थिति का वर्णन करना या प्रारंभिक स्थिति सेट करना न भूलें। CreateReducer फ़ंक्शन प्रत्येक प्रकार की कार्रवाई को संसाधित करने के लिए फ़ंक्शन खोज तालिकाओं के रूप में परिभाषित करके Reducer फ़ंक्शन के निर्माण को सरल बनाता है। यह आपको रीड्यूसर्स के अंदर "म्यूटेबल" शैली में कोड लिखकर अपरिवर्तनीय अपडेट के तर्क को सरल बनाने की अनुमति देता है।

एक मजबूत घटना से निपटने की शैली इमेर लाइब्रेरी के उपयोग के माध्यम से उपलब्ध है। हैंडलर फ़ंक्शन या तो "म्यूटेट" कर सकता है, राज्य गुणों को बदलने के लिए पारित किया गया था, या एक नई स्थिति वापस कर सकता है, जब अपरिवर्तनीय शैली में काम कर रहा है, लेकिन इमेर के लिए धन्यवाद, ऑब्जेक्ट का वास्तविक उत्परिवर्तन नहीं किया जाता है। पहला विकल्प काम और धारणा के लिए बहुत आसान है, खासकर जब गहरी घोंसले के शिकार के साथ किसी वस्तु को बदलते हुए।

सावधान रहें: एक फ़ंक्शन से एक नई वस्तु लौटाना "परिवर्तनशील" परिवर्तनों को ओवरराइड करता है। दोनों राज्य अद्यतन विधियों का एक साथ उपयोग काम नहीं करेगा।

CreateReducer फ़ंक्शन इनपुट पैरामीटर के रूप में निम्न तर्कों को स्वीकार करता है:

• भंडारण की प्रारंभिक अवस्था
• एक वस्तु जो क्रियाओं के प्रकार और रीड्यूसर के बीच एक पत्राचार स्थापित करती है, जिनमें से प्रत्येक एक निश्चित प्रकार की प्रक्रिया करता है।

CreateReducer विधि का उपयोग करके, हमें निम्नलिखित कोड मिलता है:

 const initialState = { productReleases: [], loadedProductRelease: null, fetchingState: 'none', creatingState: 'none', loadingState: 'none', error: null, }; const counterReducer = createReducer(initialState, { [productReleasesFetching]: (state, action) => { state.fetchingState = 'requesting' }, [productReleasesFetched.type]: (state, action) => { state.productReleases = action.payload.productReleases; state.fetchingState = 'success'; }, [productReleasesFetchingError]: (state, action) => { state.fetchingState = 'failed'; state.error = action.payload.error; }, … [productReleaseUpdating]: (state) => { state.updatingState = 'requesting' }, [productReleaseUpdated]: (state, action) => { state.updatingState = 'success'; state.productReleases = state.productReleases.map(productRelease => { if (productRelease.id === action.payload.productRelease.id) return action.payload.productRelease; return productRelease; }); }, [productReleaseUpdatingError]: (state, action) => { state.updating = 'failed'; state.error = action.payload.error; }, }); 

जैसा कि हम देख सकते हैं, createAction और createReducer फ़ंक्शन का उपयोग करना अनिवार्य रूप से अतिरिक्त कोड लिखने की समस्या को हल करता है, लेकिन पहले से ही स्थिरांक बनाने की समस्या अभी भी बनी हुई है। इसलिए, हम एक और अधिक शक्तिशाली विकल्प पर विचार करते हैं जो एक्शन क्रिएटर्स और रिड्यूसर की पीढ़ी को जोड़ती है - createSlice फ़ंक्शन।

CreateSlice फ़ंक्शन

CreateSlice फ़ंक्शन इनपुट फ़ील्ड के रूप में निम्न फ़ील्ड के साथ एक ऑब्जेक्ट स्वीकार करता है:

• नाम - निर्मित कार्यों के नाम स्थान ( ${name}/${action.type} );
• initialState - reducer की प्रारंभिक स्थिति;
• reducers - संचालकों के साथ एक वस्तु। प्रत्येक हैंडलर तर्कों के साथ एक फ़ंक्शन लेता है राज्य और कार्रवाई, कार्रवाई में पेलोड संपत्ति में डेटा और घटना का नाम संपत्ति में होता है। इसके अलावा, रेड्यूसर में प्रवेश करने से पहले घटना से प्राप्त डेटा को पहले से बदलना संभव है (उदाहरण के लिए, संग्रह के तत्वों में आईडी जोड़ें)। ऐसा करने के लिए, एक फ़ंक्शन के बजाय, आपको रीड्यूसर के साथ एक ऑब्जेक्ट पास करना होगा और फ़ील्ड तैयार करना होगा, जहां रेड्यूसर एक्शन हैंडलर फ़ंक्शन है और तैयार पेलोड हैंडलर फ़ंक्शन है जो अपडेटेड पेलोड लौटाता है;
• extraReducers - एक ऑब्जेक्ट जिसमें दूसरे स्लाइस के reducers होते हैं। यदि किसी अन्य स्लाइस से संबंधित ऑब्जेक्ट को अपडेट करना आवश्यक है, तो यह पैरामीटर आवश्यक हो सकता है। आप आधिकारिक दस्तावेज़ के संबंधित अनुभाग से इस कार्यक्षमता के बारे में अधिक जान सकते हैं।

फ़ंक्शन का परिणाम एक ऑब्जेक्ट है जिसे "स्लाइस" कहा जाता है, निम्न फ़ील्ड्स के साथ:

• नाम - टुकड़ा नाम,
• reducer - reducer,
• क्रियाएँ - क्रियाओं का एक समूह।

हमारी समस्या को हल करने के लिए इस फ़ंक्शन का उपयोग करके, हमें निम्नलिखित स्रोत कोड प्राप्त होते हैं:

 const initialState = { productReleases: [], loadedProductRelease: null, fetchingState: 'none', creatingState: 'none', loadingState: 'none', error: null, }; const productReleases = createSlice({ name: 'productReleases', initialState, reducers: { productReleasesFetching: (state) => { state.fetchingState = 'requesting'; }, productReleasesFetched: (state, action) => { state.productReleases = action.payload.productReleases; state.fetchingState = 'success'; }, productReleasesFetchingError: (state, action) => { state.fetchingState = 'failed'; state.error = action.payload.error; }, … productReleaseUpdating: (state) => { state.updatingState = 'requesting' }, productReleaseUpdated: (state, action) => { state.updatingState = 'success'; state.productReleases = state.productReleases.map(productRelease => { if (productRelease.id === action.payload.productRelease.id) return action.payload.productRelease; return productRelease; }); }, productReleaseUpdatingError: (state, action) => { state.updating = 'failed'; state.error = action.payload.error; }, }, }); 

अब हम बनाए गए स्लाइस से एक्शन क्रिएटर्स और रेड्यूसर निकालेंगे।

 const { actions, reducer } = productReleases; export const { productReleasesFetched, productReleasesFetching, productReleasesFetchingError, … productReleaseUpdated, productReleaseUpdating, productReleaseUpdatingError } = actions; export default reducer; 

कार्रवाई करते समय पासिंग मापदंडों की विधि को छोड़कर, एपीआई कॉल वाले एक्शन रचनाकारों का स्रोत कोड नहीं बदला गया है:

 export const fetchProductReleases = () => (dispatch) => { dispatch(productReleasesFetching()); return productReleasesService .getProductReleases() .then((productReleases) => dispatch(productReleasesFetched({ productReleases }))) .catch((error) => { error.clientMessage = "Can't get product releases"; dispatch(productReleasesFetchingError({ error })); }); }; … export const updateProductRelease = (id, productName, productVersion, releaseDate) => (dispatch) => { dispatch(productReleaseUpdating()); return productReleasesService .updateProductRelease(id, productName, productVersion, releaseDate) .then((productRelease) => dispatch(productReleaseUpdated({ productRelease }))) .catch((error) => { error.clientMessage = "Can't update product releases"; dispatch(productReleaseUpdatingError({ error })); }); 

उपरोक्त कोड दिखाता है कि CreateSlice फ़ंक्शन आपको Redux के साथ काम करते समय बॉयलरप्लेट के एक महत्वपूर्ण हिस्से से छुटकारा पाने की अनुमति देता है, जो आपको कोड को न केवल अधिक कॉम्पैक्ट, संक्षिप्त और समझने योग्य बनाता है, बल्कि इसे लिखने में भी कम समय व्यतीत करता है।

परिणाम

इस लेख के अंत में, मैं कहना चाहूंगा कि इस तथ्य के बावजूद कि Redux टूलकिट पुस्तकालय भंडारण प्रबंधन में कुछ नया नहीं जोड़ता है, यह पहले की तुलना में कोड लिखने के लिए बहुत अधिक सुविधाजनक साधन प्रदान करता है। ये उपकरण न केवल विकास प्रक्रिया को अधिक सुविधाजनक, समझने योग्य और तेज़ बनाने की अनुमति देते हैं, बल्कि कई प्रकार के सिद्ध उपकरणों के पुस्तकालय में मौजूद होने के कारण अधिक प्रभावी भी हैं। हम, Inobitek, हमारे सॉफ्टवेयर उत्पादों के विकास में इस पुस्तकालय का उपयोग जारी रखने और वेब प्रौद्योगिकियों के क्षेत्र में नए होनहार विकास की निगरानी करने की योजना बना रहे हैं।

आपका ध्यान के लिए धन्यवाद। हमें उम्मीद है कि हमारा लेख उपयोगी होगा। Redux टूलकिट लाइब्रेरी के बारे में अधिक जानकारी आधिकारिक दस्तावेज से प्राप्त की जा सकती है।