Redux: यह क्या है, React Native में स्थिति प्रबंधन पैटर्न
Redux JavaScript अनुप्रयोगों के लिए एक पूर्वानुमेय स्थिति प्रबंधन कंटेनर है, जिसे Dan Abramov ने 2015 में बनाया था। Redux Flux आर्किटेक्चर पर आधारित एकदिशीय डेटा प्रवाह लागू करता है: स्थिति एक ही Store में संग्रहीत होती है, केवल शुद्ध Reducer फ़ंक्शन के माध्यम से बदली जाती है और Dispatch के साथ Action के माध्यम से शुरू की जाती है। npm Trends के अनुसार, Redux प्रति सप्ताह 7 मिलियन से अधिक डाउनलोड बनाए रखता है, जो React Native और वेब अनुप्रयोगों में स्थिति प्रबंधन के लिए मानक बना हुआ है।
मुख्य बिंदु
- Store — एकमात्र सत्य स्रोत, संपूर्ण अनुप्रयोग स्थिति वृक्ष संग्रहीत करता है
- Action — type फ़ील्ड वाला ऑब्जेक्ट, स्थिति बदलने के इरादे का वर्णन करता है
- Reducer — शुद्ध फ़ंक्शन (prevState, action) => newState बिना साइड-इफ़ेक्ट के
- Dispatch — Action को Reducer में भेजने के लिए Store विधि
- Middleware — एसिंक्रोनस संचालन और लॉगिंग के लिए dispatch और reducer के बीच की परत
Redux क्या है?
Redux एक आर्किटेक्चरल पैटर्न और स्थिति प्रबंधन के लिए लाइब्रेरी है, जो तीन सिद्धांतों पर आधारित है: एकमात्र सत्य स्रोत, केवल-पढ़ने योग्य स्थिति, और शुद्ध फ़ंक्शन के माध्यम से परिवर्तन। MVC के विपरीत, जहाँ मॉडल अप्रत्याशित रूप से स्थिति बदल सकता है, Redux नियतिवाद की गारंटी देता है: समान इनपुट डेटा के साथ, परिणाम हमेशा समान होता है।
Redux Facebook के Flux आर्किटेक्चर और Elm भाषा से प्रेरित था। Flux से मुख्य अंतर कई के बजाय एक ही Store है। Redux में, संपूर्ण अनुप्रयोग स्थिति — ऑब्जेक्ट, ऐरे, लोडिंग फ़्लैग — एक ही वृक्ष में संग्रहीत होती है। यह डिबगिंग, परीक्षण और टाइम-ट्रैवल डिबगिंग को सरल बनाता है। डेवलपर पूरा Store सहेज सकता है, Action अनुक्रम को दोहरा सकता है और देख सकता है कि प्रत्येक चरण में स्थिति कैसे बदली।
State of JS 2025 सर्वेक्षण के अनुसार, स्थिति प्रबंधन का उपयोग करने वाले 68% उत्तरदाता Redux या Redux Toolkit चुनते हैं। यह उपकरण सभी आधुनिक फ्रेमवर्क द्वारा समर्थित है: React, React Native, Angular, Vue और यहाँ तक कि फ्रेमवर्क के बिना वैनिला JavaScript।
एकदिशीय डेटा प्रवाह
एकदिशीय डेटा प्रवाह Redux का मुख्य सिद्धांत है, जहाँ डेटा सख्ती से एक दिशा में चलता है: View → Action → Dispatch → Reducer → Store → View। कोई भी घटक Store को सीधे नहीं बदल सकता। View केवल useSelector या connect के माध्यम से परिवर्तनों की सदस्यता लेता है और dispatch के माध्यम से परिवर्तन शुरू करता है।
Redux कार्यप्रवाह चक्र: उपयोगकर्ता एक बटन दबाता है → घटक dispatch({ type: 'INCREMENT' }) कॉल करता है → Store Action को Root Reducer को भेजता है → Reducer नई स्थिति की गणना करता है → Store ग्राहकों को सूचित करता है → View नए डेटा के साथ पुनः रेंडर होता है। यह चक्र गारंटी देता है कि प्रत्येक परिवर्तन का एक विशिष्ट Action के रूप में स्पष्ट कारण है।
DevTools — प्रत्येक Action, Store स्थिति और निष्पादन समय की निगरानी के लिए Redux में निर्मित उपकरण। डेवलपर सभी भेजे गए Action की सूची, पहले और बाद की स्थिति अंतर (diff) देखता है, और किसी भी पिछली स्थिति में वापस जा सकता है। यह पारंपरिक लॉगिंग की तुलना में जटिल स्थितियों की डिबगिंग को दस गुना तेज़ बनाता है।
Redux के मुख्य घटक
Store — एक ऑब्जेक्ट जो संपूर्ण अनुप्रयोग स्थिति वृक्ष रखता है। configureStore (RTK) या createStore के माध्यम से बनाया जाता है। Store तीन विधियाँ प्रदान करता है: getState() पढ़ने के लिए, dispatch(action) बदलने के लिए, और subscribe(listener) सदस्यता के लिए। Redux Toolkit में, Store पहले से ही middleware, DevTools और स्लाइस समर्थन शामिल करता है।
TypeScript
import { configureStore } from '@reduxjs/toolkit'
interface CounterState {
value: number
}
const initialState: CounterState = { value: 0 }
function counterReducer(
state = initialState,
action: { type: string }
): CounterState {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
default:
return state
}
}
const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }Action और Action Creator — Action एक ऑब्जेक्ट है जिसमें अनिवार्य type फ़ील्ड (स्ट्रिंग स्थिरांक) और वैकल्पिक payload (डेटा) होता है। Action Creator एक फ़ंक्शन है जो Action लौटाता है। Redux Toolkit में, स्वचालित टाइपिंग के साथ Action उत्पन्न करने के लिए createAction का उपयोग किया जाता है।
Reducer — एक शुद्ध फ़ंक्शन जो वर्तमान स्थिति और Action प्राप्त करता है, नई स्थिति लौटाता है। Reducer को नहीं करना चाहिए: स्थिति को म्यूटेट करना (नया ऑब्जेक्ट लौटाया जाता है), API कॉल करना, यादृच्छिक संख्याएँ उत्पन्न करना, या Date तक पहुँचना। अपरिवर्तनीयता स्प्रेड ऑपरेटर ... या Immer (RTK में निर्मित) के माध्यम से सुनिश्चित की जाती है।
| घटक | जिम्मेदारी | सीमाएँ |
|---|---|---|
| Store | स्थिति, dispatch, subscribe का भंडारण | प्रति अनुप्रयोग एक |
| Action | स्थिति बदलने के इरादे का वर्णन | type होना चाहिए |
| Reducer | नई स्थिति की गणना | शुद्ध फ़ंक्शन, बिना साइड-इफ़ेक्ट |
| Dispatch | Action को Reducer में भेजना | डिफ़ॉल्ट रूप से सिंक्रोनस |
| Selector | Store से डेटा निकालना | createSelector के माध्यम से मेमोइज़ेशन |
Middleware और Redux Thunk
Middleware फ़ंक्शन की एक श्रृंखला है जो dispatch कॉल और Action के Reducer तक पहुँचने के बीच डाली जाती है। प्रत्येक middleware Store API प्राप्त करता है और Action को लॉग, संशोधित, विलंब या रद्द कर सकता है। Redux Thunk एसिंक्रोनस संचालन के लिए मानक middleware है, जो ऑब्जेक्ट के बजाय फ़ंक्शन को dispatch करने की अनुमति देता है।
JavaScript
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUser = createAsyncThunk(
'users/fetchById',
async (userId: number, { rejectWithValue }) => {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok)
return rejectWithValue('Failed to fetch')
return await response.json()
}
)लोकप्रिय middleware: Redux Thunk — सरल एसिंक्रोनस कॉल के लिए, Redux Saga — जनरेटर सागा के साथ जटिल परिदृश्यों के लिए (debounce, race, समानांतर अनुरोध), Redux Observable — प्रतिक्रियाशील स्ट्रीम के लिए RxJS पर आधारित। Redux Toolkit में, middleware configureStore में middleware पैरामीटर के माध्यम से जुड़ता है।
State of JS 2025 सर्वेक्षण के अनुसार, Thunk का उपयोग 72% Redux परियोजनाओं में, Saga का 18% में और Observable का 5% में होता है। अधिकांश अनुप्रयोगों के लिए, Thunk + RTK Query का संयोजन एसिंक्रोनस डेटा कार्यप्रवाह के 95% को कवर करने के लिए पर्याप्त है।
Redux Toolkit और RTK Query
Redux Toolkit (RTK) Redux लॉजिक लिखने का आधिकारिक, अनुशंसित तरीका है, जो 2019 में जारी किया गया था। RTK में configureStore, createSlice, createAsyncThunk और createEntityAdapter शामिल हैं, जो Redux boilerplate को 60-70% तक कम करता है। मैन्युअल रूप से Action Creator, Reducer और प्रकार बनाने के बजाय, एक ही createSlice का उपयोग किया जाता है।
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) { state.value += 1 },
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
}
}
})
export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducerRTK Query Redux Toolkit पर आधारित API के साथ काम करने के लिए एक अंतर्निर्मित समाधान है। यह createApi के माध्यम से घोषणात्मक रूप से एंडपॉइंट परिभाषित करने की अनुमति देता है जिसमें स्वचालित हुक निर्माण, कैशिंग, टैग अमान्यकरण और आशावादी अद्यतन शामिल हैं। RTK Query प्रत्येक API अनुरोध के लिए मैन्युअल Thunk, Reducer और Selector लेखन को बदल देता है।
Entity Adapter — इकाई संग्रह को सामान्य करने के लिए createEntityAdapter उपयोगिता। ऑब्जेक्ट ऐरे के लिए अंतर्निर्मित CRUD रिड्यूसर, सेलेक्टर और सॉर्टिंग प्रदान करता है। यदि Store में उपयोगकर्ताओं, उत्पादों या ऑर्डर की सूची है — तो Entity Adapter रिड्यूसर कोड को 80% तक कम करता है।
React Native में Redux
React Native Redux JavaScript में मोबाइल अनुप्रयोगों के लिए मानक स्टैक है। Redux react-redux से Provider के माध्यम से एकीकृत होता है, जो रूट एप्लिकेशन घटक को लपेटता है। useSelector और useDispatch हुक घटकों को props drilling के बिना स्थिति तक पहुँच प्रदान करते हैं। Persist — redux-persist Store को AsyncStorage या MMKV में सहेजता है, एप्लिकेशन पुनः आरंभ के बाद स्थिति पुनर्स्थापित करता है।
React Native के लिए Middleware: Flipper के माध्यम से डिबगिंग के लिए redux-flipper, देशी ड्राइवरों के साथ प्रतिक्रियाशील स्ट्रीम के लिए redux-observable, तेज़ स्थायी भंडारण के लिए react-native-mmkv। नेविगेशन प्लगिन redux-first-router स्क्रीन को Store से जोड़ता है, जिससे वापसी पर स्क्रीन स्थिति बहाल करने की अनुमति मिलती है।
React Native में, Redux का उपयोग नेटवर्क-फर्स्ट रणनीति के साथ किया जाता है: ऐप पहले सर्वर से डेटा लोड करने का प्रयास करता है, फिर इसे RTK Query या redux-persist के माध्यम से Store में कैश करता है। ऑफ़लाइन मोड Redux + NetInfo + कनेक्शन बहाल होने पर पुनः भेजने के लिए Action कतार के संयोजन से प्राप्त किया जाता है।
अक्सर पूछे जाने वाले प्रश्न
Redux, React के Context API से कैसे अलग है?
Redux Store, DevTools, Middleware और अपरिवर्तनीय स्थिति के साथ एक पूर्ण-सुविधा वाला समाधान है। Context API React में props drilling के बिना डेटा पास करने के लिए एक अंतर्निर्मित तंत्र है। Context वैश्विक थीम और स्थानीयकरण के लिए उपयुक्त है, जबकि Redux एसिंक्रोनस संचालन, कैशिंग और डिबगिंग के साथ जटिल स्थिति के लिए है। बड़े अनुप्रयोगों में, Context अनावश्यक पुनः रेंडरिंग का कारण बनता है, जबकि Redux सेलेक्टर के साथ इस समस्या को हल करता है।
Redux Toolkit में Immer क्या है?
Immer अपरिवर्तनीय स्थिति प्रबंधन के लिए एक लाइब्रेरी है, जो Redux Toolkit में निर्मित है। Immer आपको रिड्यूसर लिखने की अनुमति देता है जैसे कि आप सीधे स्थिति को बदल रहे हों: state.value += 1. अंदर से, Immer एक प्रॉक्सी ऑब्जेक्ट (draft) बनाता है, परिवर्तनों को ट्रैक करता है और एक नई अपरिवर्तनीय ऑब्जेक्ट लौटाता है। यह रिड्यूसर कोड की मात्रा को 50% कम करता है और आकस्मिक म्यूटेशन को समाप्त करता है।
Redux का परीक्षण कैसे करें?
Redux लॉजिक को अलग-अलग परखा जाता है: Reducer — एक शुद्ध फ़ंक्शन, बस विभिन्न Action के साथ कॉल करें और परिणाम जाँचें। Action Creator — लौटाए गए ऑब्जेक्ट को सत्यापित करें। Thunk — API को मॉक करें, dispatch कॉल करें और जाँचें कि कौन से Action भेजे गए। useSelector वाला घटक — रेंडरर में परीक्षण Store के साथ Provider का उपयोग करें। Redux DevTools वास्तविक सत्र से Action अनुक्रम को दोहराकर परीक्षण लिखने में मदद करते हैं।
useState के बजाय Redux का उपयोग कब करें?
useState एकल घटक की स्थानीय स्थिति के लिए पर्याप्त है: फ़ील्ड टेक्स्ट, मोडल खोलें/बंद करें। Redux की आवश्यकता तब होती है जब स्थिति कई स्क्रीन के बीच साझा की जाती है, एसिंक्रोनस सिंक्रोनाइज़ेशन (सर्वर से डेटा) की आवश्यकता होती है, एप्लिकेशन पुनः आरंभ के बीच बनी रहनी चाहिए (persist), या टाइम-ट्रैवल डिबगिंग की आवश्यकता होती है। छोटे अनुप्रयोगों के लिए, Redux अत्यधिक है — इसके बजाय Context + useReducer का उपयोग करें।
Redux में सामान्यीकरण क्या है?
Normalizr नेस्टेड डेटा को फ्लैट Store संरचना में सामान्य करने के लिए एक लाइब्रेरी है। user.posts[0].comments जैसे गहरे ऑब्जेक्ट संग्रहीत करने के बजाय, सामान्यीकरण शब्दकोश बनाता है: entities.users, entities.posts, entities.comments ID द्वारा संदर्भ के साथ। यह एक ही इकाई को सभी स्थानों पर अद्यतन करना सरल बनाता है और सेलेक्टर को गति देता है। Redux Toolkit जटिल मॉडल के लिए सामान्यीकृत डेटा की अनुशंसा करता है।
सारांश
- Redux — एक ही Store और शुद्ध Reducer के साथ पूर्वानुमेय स्थिति कंटेनर
- Action — type वाला ऑब्जेक्ट, Reducer — शुद्ध फ़ंक्शन, Dispatch — भेजने का तंत्र
- Redux Toolkit — createSlice, createAsyncThunk और RTK Query के साथ आधिकारिक API
- Middleware — एसिंक्रोनसिटी के लिए परत: Thunk, Saga, Observable
- React Native ऑफ़लाइन मोड के लिए Provider, useSelector और redux-persist के माध्यम से एकीकृत होता है
- DevTools — प्रत्येक Action के पुनर्प्ले के साथ टाइम-ट्रैवल डिबगिंग
- Normalizr — कुशल सेलेक्टर और अद्यतन के लिए डेटा सामान्यीकरण
हम एक मोबाइल एप्लिकेशन टर्नकी विकसित करेंगे
IT Sectr 2017 से स्टार्टअप और व्यवसायों के लिए iOS और Android एप्लिकेशन बनाता है। हम आपको सलाह देंगे और सर्वोत्तम समाधान प्रस्तावित करेंगे।
यह भी पढ़ें