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!