అవగాహన, మరియు _ Redux Store Actions Reducers React

Redux-ఆధారిత అప్లికేషన్‌లో, ఆర్కిటెక్చర్ మూడు ప్రధాన భావనల చుట్టూ తిరుగుతుంది: Redux store, actions, మరియు reducers. ఈ భావనలలో ప్రతిదానిని లోతుగా పరిశోధిద్దాం మరియు అవి ఎలా కలిసి పని చేస్తాయో చూద్దాం.

Redux Store

Redux store అనేది మీ అప్లికేషన్ యొక్క పూర్తి స్థితిని కలిగి ఉన్న సత్యం యొక్క ఏకైక మూలం. ఇది తప్పనిసరిగా మొత్తం అప్లికేషన్ స్థితిని సూచించే డేటాను కలిగి ఉండే JavaScript ఆబ్జెక్ట్. మీరు 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తో అభివృద్ధిని కొనసాగిస్తున్నప్పుడు, ఈ భావనలు మీ రాష్ట్ర నిర్వహణ వ్యూహానికి పునాదిని ఏర్పరుస్తాయి.