Komplettes Redux-Toolkit (Teil 1)

Zweck des Redux Toolkits

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

• Das Einrichten des Shops ist zu kompliziert.
• Viele Pakete für die Arbeit mit Redux hinzugefügt, z. B. Middleware, Tools.
• Redux benötigt zu viel Code zum Einrichten

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:

1. Weniger Standardcode: Aktionsersteller und Konstanten sind nicht mehr erforderlich.
2. Vereinfachte Store-Einrichtung: Bietet eine einzige API zum Konfigurieren des Stores mit sinnvollen Standardeinstellungen.
3. Integrierte Unterstützung für Unveränderlichkeit und DevTools: Aktiviert automatisch Redux DevTools und integriert sich mit Immer für Unveränderlichkeit.
4. Bessere TypeScript-Unterstützung: Bietet bessere Eingaben und lässt sich gut in TypeScript integrieren.

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

1. Slices und Reducer verstehen

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.

1. Konfigurieren des Redux Store

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')
);

1. Komponenten mit dem Store verbinden

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;

1. Fazit und nächste Schritte

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!