समजून घेणे, आणि मध्ये Redux Store Actions Reducers React

Redux-संचालित ऍप्लिकेशनमध्ये, आर्किटेक्चर तीन मुख्य संकल्पनांभोवती फिरते: Redux store, actions, आणि reducers. चला या प्रत्येक संकल्पनेचा सखोल अभ्यास करूया आणि ते एकत्र कसे कार्य करतात ते पाहू या.

Redux Store

Redux store हा सत्याचा एकमेव स्रोत आहे जो तुमच्या अर्जाची संपूर्ण स्थिती ठेवतो. हे मूलत: एक JavaScript ऑब्जेक्ट आहे ज्यामध्ये संपूर्ण अनुप्रयोग स्थिती दर्शविणारा डेटा असतो. तुम्ही Redux लायब्ररीतून फंक्शन store वापरून तयार करता. createStore

Actions

Actions साध्या JavaScript ऑब्जेक्ट्स आहेत जे अनुप्रयोगात घडलेल्या गोष्टीचे वर्णन करतात. त्यांच्याकडे एक 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 जेव्हा वापरकर्ता नवीन टूडू जोडतो, तेव्हा पेलोड म्हणून टूडूचा प्रकार आणि मजकूरासह कृती पाठविली जाते. todos रीड्यूसरला ही क्रिया प्राप्त होते, राज्यामध्ये नवीन todo जोडते आणि अद्यतनित स्थिती परत करते.

निष्कर्ष

प्रभावी राज्य व्यवस्थापनासाठी Redux store, actions, आणि परस्परसंवाद कसे महत्त्वाचे आहे हे समजून घेणे. reducers हे आर्किटेक्चर चिंतेचे स्पष्ट पृथक्करण सुनिश्चित करते आणि जटिल अनुप्रयोग स्थिती व्यवस्थापित करणे सोपे करते. जसजसे तुम्ही Redux सह विकसित करत राहाल, तसतसे या संकल्पना तुमच्या राज्य व्यवस्थापन धोरणाचा पाया तयार करतील.