Forståelse og ind _ Redux Store Actions Reducers React

I en Redux-drevet applikation drejer arkitekturen sig om tre hovedkoncepter: Redux store, actions, og reducers. Lad os dykke dybere ned i hvert af disse koncepter og se, hvordan de fungerer sammen.

Redux Store

Redux store er en enkelt kilde til sandhed, der holder hele din ansøgnings tilstand. Det er i bund og grund et JavaScript-objekt, der indeholder data, der repræsenterer hele applikationstilstanden. Du opretter ved store hjælp af createStore funktionen fra Redux-biblioteket.

Actions

Actions er almindelige JavaScript-objekter, der beskriver noget, der skete i applikationen. De har et type felt, der angiver den type handling, der udføres, og yderligere data kan også inkluderes. Actions oprettes ved hjælp af handlingsskabere, som er funktioner, der returnerer handlingsobjekter. For eksempel:

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

Reducers

Reducers angiv, hvordan applikationens tilstand ændres som svar på actions. En reducering er en ren funktion, der tager den nuværende tilstand og en handling som argumenter og returnerer en ny tilstand. Reducers kombineres til en enkelt rodreduktion ved hjælp af combineReducers funktionen. Her er et simpelt eksempel:

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

Arbejde sammen

Når du sender en handling ved hjælp af dispatch funktionen, videresender Redux handlingen til alle reducers. Hver reducering kontrollerer, om handlingens type matcher dens egen og opdaterer den relevante del af tilstanden i overensstemmelse hermed. Den opdaterede tilstand gemmes derefter i Redux'en store, og alle tilsluttede komponenter gengives baseret på den nye tilstand.

Eksempel Scenario

Forestil dig en opgavelisteapplikation. Når en bruger tilføjer en ny opgave, sendes en handling med typen ADD_TODO og teksten af ​​opgaven som nyttelast. Todos-reduceren modtager denne handling, føjer den nye todo til tilstanden og returnerer den opdaterede tilstand.

Konklusion

At forstå, hvordan Redux store, actions, og reducers interagerer er afgørende for effektiv statsforvaltning. Denne arkitektur sikrer en klar adskillelse af bekymringer og gør det nemt at administrere komplekse applikationstilstande. Efterhånden som du fortsætter med at udvikle dig med Redux, vil disse koncepter danne grundlaget for din statsforvaltningsstrategi.