Förståelse, och in Redux Store Actions Reducers React

I en Redux-driven applikation kretsar arkitekturen kring tre huvudkoncept: Redux store, actions, och reducers. Låt oss fördjupa oss i vart och ett av dessa koncept och se hur de fungerar tillsammans.

Redux Store

Redux store är en enda källa till sanning som håller hela tillståndet för din ansökan. Det är i huvudsak ett JavaScript-objekt som innehåller data som representerar hela applikationstillståndet. Du skapar store med hjälp av createStore funktionen från Redux-biblioteket.

Actions

Actions är vanliga JavaScript-objekt som beskriver något som hände i applikationen. De har ett type fält som anger vilken typ av åtgärd som utförs, och ytterligare data kan också inkluderas. Actions skapas med hjälp av åtgärdsskapare, som är funktioner som returnerar åtgärdsobjekt. Till exempel:

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

Reducers

Reducers ange hur programmets tillstånd ändras som svar på actions. En reducerare är en ren funktion som tar det nuvarande tillståndet och en handling som argument och returnerar ett nytt tillstånd. Reducers kombineras till en enda rotreducerare med combineReducers funktionen. Här är ett enkelt exempel:

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

Arbetar tillsammans

När du skickar en åtgärd med dispatch funktionen, vidarebefordrar Redux åtgärden till alla reducers. Varje reducerare kontrollerar om åtgärdens typ matchar sin egen och uppdaterar den relevanta delen av tillståndet därefter. Det uppdaterade tillståndet lagras sedan i Redux store, och alla anslutna komponenter återskapas baserat på det nya tillståndet.

Exempelscenario

Föreställ dig en att göra-lista-applikation. När en användare lägger till en ny uppgift, skickas en åtgärd med typen ADD_TODO och texten för uppgiften som nyttolast. Todos-reduceraren tar emot den här åtgärden, lägger till den nya uppgiften i tillståndet och returnerar det uppdaterade tillståndet.

Slutsats

Att förstå hur Redux, , store och actions interagerar reducers är avgörande för effektiv statlig förvaltning. Denna arkitektur säkerställer en tydlig separation av problem och gör det enkelt att hantera komplexa programtillstånd. När du fortsätter att utvecklas med Redux kommer dessa koncept att utgöra grunden för din statliga förvaltningsstrategi.