Unterschied zwischen Redux und Redux Toolkit
Im Bereich der Zustandsverwaltung für React-Anwendungen hat sich Redux zu einem leistungsstarken und weit verbreiteten Tool entwickelt. Redux bietet einen vorhersehbaren Zustandscontainer für JavaScript-Apps, insbesondere solche, die mit React erstellt wurden. Lernen Sie die Kernkonzepte von Redux kennen und erkunden Sie das Redux Toolkit, eine Reihe von Dienstprogrammen zur Vereinfachung des Redux-Entwicklungsprozesses.
Redux
Redux ist eine Zustandsverwaltungsbibliothek, die die Verwaltung des Zustands einer Anwendung auf vorhersehbare Weise erleichtert und zentralisiert. Es arbeitet mit einem unidirektionalen Datenfluss, was das Debuggen erleichtert und das Verständnis dafür erleichtert, wie sich Daten in einer Anwendung im Laufe der Zeit ändern.
Speicher: Der Speicher speichert den globalen Status der Anwendung. Es handelt sich um ein einzelnes JavaScript-Objekt, das den gesamten Status darstellt. Aktionen: Aktionen sind Nutzlasten von Informationen, die eine Änderung im Status der Anwendung beschreiben. Dabei handelt es sich um einfache JavaScript-Objekte, die eine Typeigenschaft enthalten. Reduzierer: Reduzierer geben an, wie sich der Status der Anwendung als Reaktion auf Aktionen ändert. Dabei handelt es sich um reine Funktionen, die den aktuellen Status und eine Aktion annehmen und den neuen Status zurückgeben. Dispatch: Dispatch ist der Prozess des Sendens einer Aktion an den Store. Dies ist die einzige Möglichkeit, den Status zu aktualisieren.Selektoren: Selektoren sind Funktionen, die zum Extrahieren bestimmter Datenelemente aus dem Status verwendet werden (state = [], action) => switch (action.type) case 'ADD_TODO': return [...state, id: Date.now(), text: action.payload, abgeschlossen: false ] ; case 'TOGGLE_TODO': return state.map((todo) => todo.id === action.payload ? ...todo, abgeschlossen: !todo.completed : todo ); Standard: Rückgabestatus; ;// Redux Store erstellenconst store = createStore(todosReducer);Standardspeicher exportieren;// App.jsimport React, useState from 'react';import useSelector, useDispatch from 'react-redux';function App( ) const todos = useSelector((state) => state); const distribution = useDispatch(); const [newTodo, setNewTodo] = useState(); const handleAddTodo = () => packet( type: 'ADD_TODO', payload: newTodo ); setNewTodo(); ; const handleToggleTodo = (id) => packet( type: 'TOGGLE_TODO', payload: id ); ; return (
Todos
- handleToggleTodo(todo.id) > todo.completed ?
todo.text: todo.text ))
todos.map((todo) => (
<input type="text" value="newTodo" onchange="(" e)> setNewTodo(e.target.value) /> <button onclick="handleAddTodo">Add Todo</button>
);export default App;Redux Toolkit?
Redux ist leistungsstark, Das Einrichten und Schreiben von Standardcode für Aktionen und Reduzierungen kann jedoch zeitaufwändig sein. Redux Toolkit ist eine Reihe von Dienstprogrammen, einschließlich einer standardisierten Methode zum Schreiben von Reduzierern, zum Erstellen von Aktionen und zum Konfigurieren des Redux-Stores. Es soll den Entwicklungsprozess vereinfachen und Best Practices fördern.
createSlice: Eine Funktion, die sowohl Reduzierer als auch Aktionen basierend auf einem Teil des Redux-Status generiert.configureStore: Eine Funktion zum Konfigurieren eines Redux-Stores mit zusätzlicher Middleware und anderem extensions.createAsyncThunk: Ein Dienstprogramm zur Handhabung asynchroner Aktionen, das den Prozess der Verwaltung asynchroner Logik vereinfacht.createEntityAdapter: Eine Reihe von Dienstprogrammen zur Verwaltung normalisierter Zustandsstrukturen, die häufig für entitätsbasierte Daten verwendet werden.npm install @reduxjs/toolkit React-Redux// todosSlice.jsimport createSlice from '@reduxjs/toolkit';const todosSlice = createSlice( name: 'todos', initialState: [], Reducers: addTodo: (state, action) => state.push( id : Date.now(), text: action.payload, abgeschlossen: false ); , toggleTodo: (state, action) => const todo = state.find((todo) => todo.id === action .payload); if (todo) todo.completed = !todo.completed; , ,);export const addTodo, toggleTodo = todosSlice.actions;export default todosSlice.reducer;// store.jsimport configureStore from '@reduxjs/toolkit';import todosReducer from './todosSlice';const store = configureStore( Reducer: todos: todosReducer, ,);export default store;// App.jsimport React, useState from 'react';import useSelector, useDispatch from 'react-redux';import addTodo, toggleTodo from './todosSlice';function App() const todos = useSelector((state) => state.todos ); const distribution = useDispatch(); const [newTodo, setNewTodo] = useState(); const handleAddTodo = () => Dispatch(addTodo(newTodo)); setNewTodo(); ; const handleToggleTodo = (id) => packet(toggleTodo(id)); ; return (
Todos
- handleToggleTodo(todo.id) > todo.completed ?
todo.text: todo.text ))
todos.map((todo) => (
<input type="text" value="newTodo" onchange="(" e)> setNewTodo(e.target.value) /> <button onclick="handleAddTodo">Add Todo</button>
);export default App;
Redux Toolkit vereinfacht den Code erheblich um Bereitstellung der Funktion „createSlice“ und anderer Dienstprogramme. Dadurch können Sie sich mehr auf die Anwendungslogik als auf Standardcode konzentrieren.
