Heim > Artikel > Web-Frontend > Komplettes Redux-Toolkit (Teil 1)
Wir wissen bereits, dass Redux eine leistungsstarke Zustandsverwaltungsbibliothek für unsere JavaScript-Anwendungen ist, insbesondere bei der Arbeit mit React.
Die Arbeit mit Redux ist jedoch aufgrund des umfangreichen Codes zum Einrichten von Redux schwierig. Das erschwert die Wartung und das Debuggen. Hier hilft das Redux Toolkit.
Probleme, die das Redux-Toolkit löst
Redux Toolkit ist die offizielle und empfohlene Methode zum Schreiben von Redux-Logik. Es bietet eine Reihe von Tools zur Vereinfachung der Entwicklung, zur Reduzierung des Boilerplate-Codes, was zu Skalierbarkeit und wartbarer Anwendung beiträgt.
Hauptvorteile des Redux Toolkits:
Wir können das Redux-Toolkit mit jeder Javascript-Bibliothek verwenden, daher richten wir das Redux-Toolkit mit React ein.
Redux Toolkit in einer React-Anwendung einrichten
Schritt 1: Erstellen Sie ein neues React-Projekt
Erstellen wir zunächst eine neue React-Anwendung. Zu diesem Zweck können Sie die Create-React-App oder Vite verwenden. Der Einfachheit halber verwenden wir hier „create-react-app“.
npx create-react-app redux-toolkit-example cd redux-toolkit-example
Schritt 2: Redux Toolkit und React-Redux installieren
Als nächstes installieren Sie die erforderlichen Pakete: @reduxjs/toolkit und React-Redux.
npm install @reduxjs/toolkit react-redux
Ein Slice ist eine Sammlung von Redux-Reduziererlogik und -Aktionen für eine bestimmte Funktion Ihrer Anwendung. Redux Toolkit bietet die Funktion „createSlice“, um mit minimalem Boilerplate einen Zustandsausschnitt zu erstellen.
Schritt 1: Erstellen Sie ein Slice
Lassen Sie uns einen einfachen Counter-Slice erstellen. Erstellen Sie eine neue Datei mit dem Namen counterSlice.js in einem Features/Counter-Verzeichnis:
// src/features/counter/counterSlice.js import { createSlice } from '@reduxjs/toolkit'; const initialState = { value: 0, }; const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, incrementByAmount: (state, action) => { state.value += action.payload; }, }, }); export const { increment, decrement, incrementByAmount } = counterSlice.actions; export default counterSlice.reducer;
Hier definieren wir einen Slice mit dem Namen „Zähler“ mit einem Anfangszustand und drei Reduzierern (Inkrement, Dekrement und InkrementByAmount). Die Funktion „createSlice“ generiert automatisch Aktionsersteller für jede Reduzierungsfunktion.
Da wir nun unser Slice haben, konfigurieren wir den Redux-Store. Redux Toolkit bietet eine configureStore-Funktion, die den Store mit guten Standardeinstellungen einrichtet.
Schritt 1: Erstellen Sie einen Shop
Erstellen Sie eine Datei „store.js“ in einem App-Verzeichnis:
// src/app/store.js import { configureStore } from '@reduxjs/toolkit'; import counterReducer from '../features/counter/counterSlice'; const store = configureStore({ reducer: { counter: counterReducer, }, }); export default store;
Schritt 2: Stellen Sie den Store für Ihre App bereit
Wickeln Sie Ihre React-Anwendung in eine Komponente von React-Redux ein und übergeben Sie sie an den Store. Aktualisieren Sie die Datei index.js:
// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { Provider } from 'react-redux'; import store from './app/store'; ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') );
Um mit dem Redux-Store zu interagieren, verwenden Sie die von React-Redux bereitgestellten useSelector- und useDispatch-Hooks.
Schritt 1: Greifen Sie mit useSelector
auf den Status zu
Verwenden Sie den useSelector-Hook, um vom Store aus auf den Status zuzugreifen
// src/features/counter/Counter.js import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement, incrementByAmount } from './counterSlice'; const Counter = () => { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return ( <div> <h1>{count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button> </div> ); }; export default Counter;
Schritt 2: Verwenden Sie die Zählerkomponente in Ihrer App
Importieren und verwenden Sie die Counter-Komponente in Ihrer Haupt-App-Komponente:
// src/App.js import React from 'react'; import Counter from './features/counter/Counter'; function App() { return ( <div className="App"> <Counter /> </div> ); } export default App;
In diesem Teil haben wir die Grundlagen der Einrichtung des Redux Toolkits in einer React-Anwendung behandelt, einschließlich der Erstellung von Slices, der Konfiguration des Stores und der Verbindung von Komponenten mit dem Redux Store mithilfe von Hooks. Im nächsten Teil werden wir uns eingehender mit der Handhabung asynchroner Logik mit createAsyncThunk befassen, um Daten von APIs abzurufen und verschiedene Ladezustände zu verwalten.
Bleiben Sie dran für Teil 2: Advanced Redux Toolkit – Async Logic mit createAsyncThunk!
Das obige ist der detaillierte Inhalt vonKomplettes Redux-Toolkit (Teil 1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!