Beherrschen des Redux-Toolkits: Vereinfachen Sie die Statusverwaltung in Ihrer React-App

Redux Toolkit: Vereinfachung der Zustandsverwaltung in React

Redux Toolkit ist eine offizielle, eigenwillige und leistungsstarke Bibliothek, die den Prozess der Einrichtung von Redux in Ihren Anwendungen vereinfacht. Obwohl Redux äußerst leistungsstark ist, kann es eine Menge Standardcode erfordern, um die Zustandsverwaltung, Aktionserstellung und Reduzierungen zu verwalten. Redux Toolkit (RTK) soll die Redux-Entwicklung einfacher und effizienter machen, indem es eine Reihe von Hilfsfunktionen bereitstellt, die häufige Aufgaben vereinfachen.

Mit Redux Toolkit können Sie Stores präziser und organisierter konfigurieren, Reduzierer schreiben und Aktionen definieren. Es enthält auch einige Standardeinstellungen, die Entwicklern helfen, häufige Fehler und Standardcode zu vermeiden.

---

1. Was ist Redux Toolkit?

Redux Toolkit ist die offizielle, empfohlene Bibliothek zum strukturierteren, prägnanteren und benutzerfreundlicheren Schreiben von Redux-Logik. Es trägt dazu bei, den Bedarf an sich wiederholendem Code zu eliminieren, indem es Dienstprogramme bereitstellt, die die Komplexität von Redux-Setups reduzieren, wie z. B. die automatische Verarbeitung unveränderlicher Statusaktualisierungen und die Vereinfachung von Aktionserstellern und -reduzierern.

---

2. Kernfunktionen des Redux Toolkit

Redux Toolkit bietet mehrere integrierte Funktionen und Dienstprogramme zur Optimierung der Redux-Nutzung:

1. configureStore

configureStore vereinfacht die Store-Konfiguration, indem es automatisch wichtige Middleware wie Redux-Thunk für asynchrone Aktionen hinzufügt und Redux DevTools zum Debuggen einrichtet.

Beispiel:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

• configureStore übernimmt die Store-Erstellung und macht sie im Vergleich zur Funktion „createStore“ einfacher und standardisierter.

2. createSlice

createSlice ist ein Dienstprogramm, das die Erstellung von Redux-Slices vereinfacht, die einen Teil des Redux-Zustands darstellen und sowohl Reduzierer als auch Aktionen enthalten.

Beispiel:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• createSlice generiert automatisch Aktionsersteller und Aktionstypen basierend auf den von Ihnen definierten Reduzierfunktionen.

3. createAsyncThunk

createAsyncThunk ist ein Tool zum Umgang mit asynchroner Logik, z. B. zum Abrufen von Daten von einer API und deren Integration in Ihren Redux-Status. Es generiert eine Reihe von Aktionserstellern (Status „Ausstehend“, „Erfüllt“ und „Abgelehnt“), um den asynchronen Fluss zu verwalten.

Beispiel:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

• createAsyncThunk hilft dabei, asynchrone Anfragen in Redux auf saubere und leicht verständliche Weise zu verwalten.

4. createEntityAdapter

createEntityAdapter ist ein Dienstprogramm zum Verwalten normalisierter Daten in Redux. Es hilft Ihnen, Datensammlungen, wie z. B. Artikellisten, effizient zu verwalten.

Beispiel:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• createEntityAdapter vereinfacht die Arbeit mit Datensammlungen (z. B. Listen oder Arrays) und ermöglicht eine einfachere Verwaltung von Entitäten wie das Hinzufügen, Aktualisieren oder Löschen von Daten.

---

3. Vorteile des Redux Toolkit

1. Weniger Boilerplate

RTK reduziert die Menge an Boilerplate-Code, die zum Einrichten von Redux erforderlich ist, erheblich. Anstatt Aktionstypen, Aktionsersteller und -reduzierer manuell zu schreiben, können Sie jetzt createSlice verwenden, um alles automatisch zu generieren.

2. Unveränderliche Updates (über Immer.js)

RTK verwendet unter der Haube Immer.js, was es Ihnen ermöglicht, „mutativen“ Code in Ihre Reduzierer zu schreiben. Immer stellt jedoch sicher, dass der Zustand unveränderlich bleibt, indem es automatisch Kopien des Zustands erstellt und Mutationen auf diese anwendet.

3. Bessere Entwicklererfahrung

Durch die automatische Konfiguration von Middleware wie redux-thunk und die Integration mit Redux DevTools erleichtert Redux Toolkit das Debuggen und Überwachen Ihres Redux-Status. Sie können auch problemlos Tools wie TypeScript verwenden, da RTK eine hervorragende Unterstützung für die Typsicherheit bietet.

4. Vereinfachte asynchrone Logik

Die Funktion „createAsyncThunk“ hilft bei der Verwaltung komplexer asynchroner Logik und integriert diese nahtlos in Ihren Redux-Status, wodurch die Komplexität der Verwaltung asynchroner Vorgänge verringert wird.

5. Daten mit createEntityAdapter normalisieren

RTK bietet Dienstprogramme wie createEntityAdapter für die Verarbeitung normalisierter Daten. Dies ist besonders nützlich für die Verwaltung großer Datenmengen (z. B. Listen von Benutzern, Produkten usw.) in Redux.

---

4. Redux Toolkit in einer React-App einrichten

Hier ist eine grundlegende Anleitung zum Einrichten des Redux Toolkits in einer React-App.

Schritt 1: Redux Toolkit und React-Redux installieren

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk(
  'data/fetchData', 
  async (url) => {
    const response = await fetch(url);
    return response.json();
  }
);

const dataSlice = createSlice({
  name: 'data',
  initialState: { items: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

export default dataSlice.reducer;

Schritt 2: Slices und Reducer erstellen

Verwenden Sie createSlice, um Ihr Redux-Slice zu definieren, das sowohl die Aktionen als auch die Reduzierungen für einen bestimmten Zustandsabschnitt enthält.

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';

const usersAdapter = createEntityAdapter();

const usersSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState(),
  reducers: {
    addUser: usersAdapter.addOne,
    removeUser: usersAdapter.removeOne,
  }
});

export const { addUser, removeUser } = usersSlice.actions;
export default usersSlice.reducer;

Schritt 3: Konfigurieren Sie den Store

Als nächstes konfigurieren Sie den Redux-Store mit configureStore.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Schritt 4: Redux in React-Komponenten verwenden

Umschließen Sie Ihre App mit der Provider-Komponente von React-Redux, um den Redux-Store in Ihrer gesamten Anwendung verfügbar zu machen.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• useSelector: Greift auf den Redux-Status zu.
• useDispatch: Sendet Aktionen zum Ändern des Status.

---

5. Fazit

Redux Toolkit vereinfacht die Arbeit mit Redux, indem es Boilerplate-Code entfernt und Hilfsfunktionen wie createSlice, createAsyncThunk und configureStore anbietet. Durch die Verwendung von RTK können sich Entwickler auf die Kernlogik der Anwendung konzentrieren, ohne sich um die Komplexität der Redux-Konfiguration kümmern zu müssen.

Mit RTK können Sie sowohl den synchronen als auch den asynchronen Zustand effizienter und wartbarer verwalten, was es zu einer großartigen Wahl für größere React-Anwendungen macht.

---

Das obige ist der detaillierte Inhalt vonBeherrschen des Redux-Toolkits: Vereinfachen Sie die Statusverwaltung in Ihrer React-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!