Forståelse, og inn Redux Store Actions Reducers React

I en Redux-drevet applikasjon dreier arkitekturen seg rundt tre hovedkonsepter: Redux store, actions, og reducers. La oss gå dypere inn i hvert av disse konseptene og se hvordan de fungerer sammen.

Redux Store

Redux store er en enkelt kilde til sannhet som inneholder den fullstendige tilstanden til søknaden din. Det er egentlig et JavaScript-objekt som inneholder dataene som representerer hele applikasjonstilstanden. Du oppretter ved store å bruke createStore funksjonen fra Redux-biblioteket.

Actions

Actions er vanlige JavaScript-objekter som beskriver noe som skjedde i applikasjonen. De har et type felt som indikerer typen handling som utføres, og tilleggsdata kan også inkluderes. Actions opprettes ved hjelp av handlingsskapere, som er funksjoner som returnerer handlingsobjekter. For eksempel:

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

Reducers

Reducers spesifiser hvordan applikasjonens tilstand endres som svar på actions. En redusering er en ren funksjon som tar den nåværende tilstanden og en handling som argumenter og returnerer en ny tilstand. Reducers kombineres til en enkelt rotreduksjon ved hjelp av combineReducers funksjonen. Her er et enkelt 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  
});  

Jobber sammen

Når du sender en handling ved hjelp av dispatch funksjonen, videresender Redux handlingen til alle reducers. Hver redusering sjekker om handlingens type samsvarer med sin egen og oppdaterer den relevante delen av tilstanden deretter. Den oppdaterte tilstanden lagres deretter i Redux store, og eventuelle tilkoblede komponenter gjengis basert på den nye tilstanden.

Eksempelscenario

Se for deg en huskelisteapplikasjon. Når en bruker legger til en ny gjøremål, sendes en handling med typen ADD_TODO og teksten til gjøremålet som nyttelast. Todos-reduksjonen mottar denne handlingen, legger til den nye gjøremålet til tilstanden og returnerer den oppdaterte tilstanden.

Konklusjon

Å forstå hvordan Redux store, actions, og reducers samhandler er avgjørende for effektiv statlig ledelse. Denne arkitekturen sikrer en klar separasjon av bekymringer og gjør det enkelt å administrere komplekse applikasjonstilstander. Når du fortsetter å utvikle deg med Redux, vil disse konseptene danne grunnlaget for din statlige ledelsesstrategi.