बुझाइ, र मा 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, र कुनै पनि जडान गरिएका कम्पोनेन्टहरू नयाँ अवस्थाको आधारमा पुन: रेन्डर हुन्छन्।

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

एक todo सूची आवेदन कल्पना गर्नुहोस्। ADD_TODO जब प्रयोगकर्ताले नयाँ कार्य थप्छ, कार्यलाई पेलोडको रूपमा कार्यको प्रकार र पाठको साथ पठाइन्छ । todos Reducer ले यो कार्य प्राप्त गर्दछ, राज्यमा नयाँ todo थप्छ, र अद्यावधिक गरिएको स्थिति फर्काउँछ।

निष्कर्ष

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