समझ, और में Redux Store Actions Reducers React

Redux-संचालित एप्लिकेशन में, आर्किटेक्चर तीन मुख्य अवधारणाओं के आसपास घूमता है: Redux store, actions और reducers । आइए इनमें से प्रत्येक अवधारणा की गहराई से जांच करें और देखें कि वे एक साथ कैसे काम करते हैं।

Redux Store

Redux store सत्य का एक एकल स्रोत है जो आपके एप्लिकेशन की संपूर्ण स्थिति रखता है। यह अनिवार्य रूप से एक जावास्क्रिप्ट ऑब्जेक्ट है जिसमें संपूर्ण एप्लिकेशन स्थिति का प्रतिनिधित्व करने वाला डेटा शामिल है। आप Redux लाइब्रेरी से फ़ंक्शन का store उपयोग करके बनाते हैं। createStore

Actions

Actions सादे जावास्क्रिप्ट ऑब्जेक्ट हैं जो एप्लिकेशन में घटित किसी चीज़ का वर्णन करते हैं। उनमें एक type फ़ील्ड होता है जो किए जा रहे कार्य के प्रकार को इंगित करता है, और अतिरिक्त डेटा भी शामिल किया जा सकता है। Actions एक्शन क्रिएटर्स का उपयोग करके बनाए जाते हैं, जो ऐसे फ़ंक्शन हैं जो एक्शन ऑब्जेक्ट लौटाते हैं। उदाहरण के लिए:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers निर्दिष्ट करें कि प्रतिक्रिया में एप्लिकेशन की स्थिति कैसे बदलती है actions । रिड्यूसर एक शुद्ध फ़ंक्शन है जो वर्तमान स्थिति और एक क्रिया को तर्क के रूप में लेता है और एक नई स्थिति लौटाता है। फ़ंक्शन का Reducers उपयोग करके एकल रूट रिड्यूसर में संयोजित किया जाता है । combineReducers यहाँ एक सरल उदाहरण है:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

एक साथ काम करना

जब आप फ़ंक्शन का उपयोग करके कोई कार्रवाई भेजते हैं dispatch, तो Redux कार्रवाई को सभी को अग्रेषित करता है reducers । प्रत्येक रेड्यूसर जाँचता है कि क्या क्रिया का प्रकार उसके प्रकार से मेल खाता है और तदनुसार राज्य के संबंधित हिस्से को अपडेट करता है। अद्यतन स्थिति को फिर Redux में संग्रहीत किया जाता है store, और किसी भी जुड़े घटक को नई स्थिति के आधार पर पुन: प्रस्तुत किया जाता है।

उदाहरण परिदृश्य

एक कार्य सूची एप्लिकेशन की कल्पना करें। जब कोई उपयोगकर्ता कोई नया कार्य जोड़ता है, तो कार्य के प्रकार ADD_TODO और पाठ के साथ पेलोड के रूप में एक कार्रवाई भेजी जाती है। टूडोस रिड्यूसर इस क्रिया को प्राप्त करता है, राज्य में नया टूडू जोड़ता है, और अद्यतन स्थिति लौटाता है।

निष्कर्ष

यह समझना कि प्रभावी राज्य प्रबंधन के लिए Redux store, actions और reducers इंटरैक्शन कैसे महत्वपूर्ण है। यह आर्किटेक्चर चिंताओं का स्पष्ट पृथक्करण सुनिश्चित करता है और जटिल एप्लिकेशन स्थितियों को प्रबंधित करना आसान बनाता है। जैसे-जैसे आप Redux के साथ विकास करना जारी रखेंगे, ये अवधारणाएँ आपकी राज्य प्रबंधन रणनीति की नींव बनेंगी।