Verständnis, und in Redux Store Actions Reducers React

In einer Redux-basierten Anwendung dreht sich die Architektur um drei Hauptkonzepte: Redux store, actions, und reducers. Lassen Sie uns tiefer in jedes dieser Konzepte eintauchen und sehen, wie sie zusammenarbeiten.

Redux Store

Der Redux store ist eine einzige Quelle der Wahrheit, die den vollständigen Status Ihrer Anwendung enthält. Es handelt sich im Wesentlichen um ein JavaScript-Objekt, das die Daten enthält, die den gesamten Anwendungsstatus darstellen. Sie erstellen die Funktion store mithilfe der createStore Funktion aus der Redux-Bibliothek.

Actions

Actions sind einfache JavaScript-Objekte, die etwas beschreiben, was in der Anwendung passiert ist. Sie verfügen über ein type Feld, das die Art der ausgeführten Aktion angibt, und es können auch zusätzliche Daten enthalten sein. Actions werden mithilfe von Aktionserstellern erstellt, bei denen es sich um Funktionen handelt, die Aktionsobjekte zurückgeben. Zum Beispiel:

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

Reducers

Reducers Geben Sie an, wie sich der Status der Anwendung als Reaktion auf ändert actions. Ein Reduzierer ist eine reine Funktion, die den aktuellen Zustand und eine Aktion als Argumente verwendet und einen neuen Zustand zurückgibt. Reducers werden mithilfe der Funktion zu einem einzelnen Wurzelreduzierer zusammengefasst combineReducers. Hier ist ein einfaches Beispiel:

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

Zusammen arbeiten

Wenn Sie eine Aktion mithilfe der dispatch Funktion auslösen, leitet Redux die Aktion an alle weiter reducers. Jeder Reduzierer prüft, ob der Typ der Aktion mit seinem eigenen übereinstimmt und aktualisiert den relevanten Teil des Zustands entsprechend. Der aktualisierte Status wird dann im Redux gespeichert store und alle verbundenen Komponenten werden basierend auf dem neuen Status neu gerendert.

Beispielszenario

Stellen Sie sich eine ToDo-Listen-Anwendung vor. ADD_TODO Wenn ein Benutzer eine neue Aufgabe hinzufügt, wird eine Aktion mit dem Typ und dem Text der Aufgabe als Nutzlast ausgelöst. Der Aufgabenreduzierer empfängt diese Aktion, fügt die neue Aufgabe zum Status hinzu und gibt den aktualisierten Status zurück.

Abschluss

Für eine effektive Zustandsverwaltung ist es von entscheidender Bedeutung, zu verstehen, wie Redux store, actions und interagieren. reducers Diese Architektur gewährleistet eine klare Trennung der Belange und erleichtert die Verwaltung komplexer Anwendungszustände. Während Sie sich mit Redux weiterentwickeln, bilden diese Konzepte die Grundlage Ihrer State-Management-Strategie.