Të kuptuarit, dhe në Redux Store Actions Reducers React

Në një aplikacion të mundësuar nga Redux, arkitektura rrotullohet rreth tre koncepteve kryesore: Redux store, actions, dhe reducers. Le të thellohemi më thellë në secilin prej këtyre koncepteve dhe të shohim se si funksionojnë së bashku.

Redux Store

Redux store është një burim i vetëm i së vërtetës që mban gjendjen e plotë të aplikacionit tuaj. Në thelb është një objekt JavaScript që përmban të dhënat që përfaqësojnë të gjithë gjendjen e aplikacionit. Ju krijoni store duke përdorur createStore funksionin nga biblioteka Redux.

Actions

Actions janë objekte të thjeshta JavaScript që përshkruajnë diçka që ka ndodhur në aplikacion. Ato përmbajnë një type fushë që tregon llojin e veprimit që po kryhet dhe mund të përfshihen gjithashtu të dhëna shtesë. Actions krijohen duke përdorur krijuesit e veprimeve, të cilët janë funksione që kthejnë objektet e veprimit. Për shembull:

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

Reducers

Reducers specifikoni se si ndryshon gjendja e aplikacionit në përgjigje të actions. Një reduktues është një funksion i pastër që merr gjendjen aktuale dhe një veprim si argumente dhe kthen një gjendje të re. Reducers kombinohen në një reduktues të vetëm rrënjë duke përdorur combineReducers funksionin. Ja një shembull i thjeshtë:

// 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  
});  

Duke punuar së bashku

Kur dërgoni një veprim duke përdorur dispatch funksionin, Redux e përcjell veprimin te të gjithë reducers. Çdo reduktues kontrollon nëse lloji i veprimit përputhet me të dhe përditëson pjesën përkatëse të gjendjes në përputhje me rrethanat. Gjendja e përditësuar më pas ruhet në Redux store, dhe çdo komponent i lidhur riprodhohet bazuar në gjendjen e re.

Shembull i skenarit

Imagjinoni një aplikacion të listës së detyrave. Kur një përdorues shton një detyrë të re, një veprim dërgohet me llojin ADD_TODO dhe tekstin e detyrës si ngarkesë. Reduktuesi i detyrave merr këtë veprim, shton detyrën e re në gjendje dhe kthen gjendjen e përditësuar.

konkluzioni

Të kuptuarit se si Redux store, actions, dhe reducers ndërveprojnë është thelbësore për menaxhimin efektiv të shtetit. Kjo arkitekturë siguron një ndarje të qartë të shqetësimeve dhe e bën të lehtë menaxhimin e gjendjeve komplekse të aplikimit. Ndërsa vazhdoni të zhvilloheni me Redux, këto koncepte do të formojnë themelin e strategjisë suaj të menaxhimit të shtetit.