React Middleware: Verknüpfung von APIs und Komponenten

Middleware ist kein neues Konzept in der Webentwicklung. Es wird in der Regel mit Backend-Frameworks wie Express.js in Verbindung gebracht, wo es viele Authentifizierungen, Protokollierungen usw. gibt. Aufgrund seiner inhärenten Vorteile hat Middleware im Frontend erheblich an Bedeutung gewonnen.

Frontend-Frameworks wie React übernehmen es als Möglichkeit, komplexe Funktionalitäten während des Statusmanagements zu handhaben. In diesem Leitfaden führen wir Sie durch das Konzept der Middleware in React und zeigen Ihnen, wie Sie sie verwenden können, um die Funktionalität Ihrer React-App zu verbessern und den Anwendungsfluss effektiv zu verwalten.

Am Ende werden Sie ein gutes Verständnis davon haben, was React-Middleware ist und wie Sie es mit Redux Thunk implementieren können.

React Middleware vereinfacht: Vereinfachung der Anwendungslogik

Was ist Middleware?

Wie der Name schon sagt, ist Middleware eine Ebene, die zwischen verschiedenen Komponenten einer Anwendung sitzt. Es bietet eine Verarbeitungs- und Funktionalitätsebene, die hier ohne sie nicht vorhanden wäre. Middleware arbeitet, indem es Anfragen abfängt, die von einer Komponente zur anderen fließen, und es Ihnen ermöglicht, spezifische Aktionen auszuführen. Nach Abschluss gibt es die modifizierte Anfrage an die nächste Middleware oder ihr beabsichtigtes Ziel weiter.

Dies ist ein Konzept, das hauptsächlich im Backend verwendet wird. Wie bereits erwähnt, wurde es jedoch in React angepasst, um einen ähnlichen Zweck zu erfüllen. Lassen Sie uns nun genauer betrachten, was Middleware speziell in React bedeutet.

Middleware in React

In React wird Middleware als eine Reihe von Funktionen implementiert, die nacheinander in der von Ihnen definierten Reihenfolge ausgeführt werden. Jede Funktion hat Zugriff auf den Zustand und die Aktionen der App. Daher können die Funktionen den Zustand ändern und neue Aktionen auslösen.

Wenn sich der Zustand in React ändert, löst die Anwendung Aktionen aus, die dann von den Reduzierern verarbeitet werden. Die Reduzierer geben dann einen neuen Zustand zurück, der gespeichert und an die Anwendung zurückgegeben wird.

React Middleware sitzt zwischen der ausgelösten Aktion und unterbricht sie, bevor sie den Reduzierer erreicht. Dann ermöglicht es Ihnen, in diesen Prozess einzugreifen und einige Code auf dieser Aktion auszuführen, zum Beispiel, sie zu protokollieren oder einen API-Aufruf zu tätigen.

Wenn dies erledigt ist, wird die modifizierte Aktion an den Reduzierer weitergeleitet (wenn es kein anderes Middleware in der Kette gibt).

Beispiele für Middleware in React

Sie finden React Middleware hauptsächlich in Redux, der komplexen Zustandsverwaltungs-React-Bibliothek. Redux hat zwei Hauptarten von Middleware:

• Thunk – wir werden genauer darauf eingehen, wie man diese Middleware verwendet, um eine Aktion zu ändern.
• Saga.

Jede von ihnen behandelt verschiedene Arten von Änderungen an Aktionen, wie wir unten sehen werden, wenn wir uns die Verwendungen von Middleware in React ansehen. Andere React-Bibliotheken, wie z. B. React Query, verwenden ebenfalls Middleware (mehr dazu später).

Bevor wir betrachten, wie dies implementiert werden kann, gehen wir über die verschiedenen Verwendungen von Middleware in React.

Verwendungen von Middleware in React

React-Middleware ist für folgende Anwendungsfälle nützlich:

Debugging und Logging

React-Middleware kann verwendet werden, um Informationen wie den aktuellen Zustand, Aktionen und andere Daten während der Anwendungs­entwicklung zu protokollieren. Darüber hinaus können sie nützlich sein, um potenzielle Fehler frühzeitig zu identifizieren und zu beheben.

Der Redux Logger (für Redux) kann Ihnen dabei helfen. Er protokolliert Redux-Aktionen und Zustandsänderungen für einfaches Debugging. Er unterbricht jede übermittelte Aktion und protokolliert den vorherigen Zustand, die Aktion und den nächsten Zustand.

Autorisierung und Authentifizierung

Wenn Sie Benutzer authentifizieren möchten, bevor Sie den Zustand aktualisieren, können Sie Redux Thunk oder Saga verwenden, um die Authentifizierungs­workflows zu verwalten. Sobald Sie eine Aktion abfangen, ermöglicht Ihnen diese Middleware das Speichern von Token, das Überprüfen der Authentifizierung vor dem Versenden der Aktion oder das Aktualisieren von Tokens.

Mit anderen Worten, diese Middleware ist nützlich, um zu überprüfen, ob ein Benutzer authentifiziert ist, um auf eine bestimmte Route zuzugreifen oder nicht.

Ereignisgesteuerte Operationen

Der React-Reducer ist darauf ausgelegt, synchrone Codes auszuführen. Das bedeutet, dass es nicht funktioniert, wenn Sie etwas Asynchrones darauf ausführen. Mit React-Middleware wie Redux Thunk können Sie die Aktion abfangen, asynchrone Aufgaben wie das Tätigen eines API-Aufrufs ausführen und zum Reducer übergehen, sobald dies erledigt ist.

Daten zwischenspeichern

React Query (eine weitere React-Middleware) kann als effektives Tool zur Zwischenspeicherung von Anwendungsdaten dienen. Es zwischenspeichert API-Antworten automatisch und validiert sie bei Bedarf erneut. Dadurch hilft es, redundante API-Aufrufe zu vermeiden, indem es die erforderlichen Informationen im Cache überprüft.

Leistungssteigerung

React Middleware kann auch dazu beitragen, die Leistung der Anwendung zu verbessern, indem unnötige Aktionen aufgeschoben, Ereignisse verzögert und bestimmte Aufgaben stapelverarbeitet werden. Durch das Zwischenspeichern von API-Antworten verbessert React Query auch die Leistung Ihrer React-Apps.

Wie verwendet man Middleware in React?

Redux ist ein leistungsstarkes Tool zur Verwaltung des globalen Zustands in React-Anwendungen. Es enthält mehrere Middleware in seinem Toolkit, die Sie verwenden können, um benutzerdefinierte Funktionalitäten zu Ihren React-Apps hinzuzufügen. Eine der häufigsten ist Redux Thunk.

Einführung in Redux Thunk

Bevor wir uns tiefer in die Implementierung von Thunk stürzen, sammeln wir einige Informationen darüber, damit wir es effektiv nutzen können.

Was ist Thunk?

In der allgemeinen Programmierung ist ein „Thunk“ einfach eine Funktion, die zur Verzögerung der Auswertung und Ausführung einer Funktion verwendet wird. Wir können es als eine Funktion betrachten, die eine Aktion aufschiebt, bis eine bestimmte Bedingung erfüllt ist.

In Redux ist ein Thunk eine spezifische Funktion, die mit der Redux Thunk-Middleware verwendet wird. Redux Thunk ist darauf ausgelegt, asynchrone Operationen innerhalb Ihrer React-App zuzulassen. Wie bereits erwähnt, ist der Reducer darauf ausgelegt, synchronen Code auszuführen. Das bedeutet, dass der Reducer den Zustand sofort aktualisiert, wenn eine Aktion ausgelöst wird.

Redux Thunk als Middleware

Redux Thunk fungiert als Middleware. Es ermöglicht Ihnen, Action-Creator zu schreiben, die Funktionen (Thunks) anstelle von einfachen Aktionsobjekten zurückgeben. Diese Funktionen können asynchrone Logik enthalten. Wenn Sie einen Thunk versenden, unterbricht die Thunk-Middleware ihn und führt die Funktion aus.

Innerhalb des thunks können Sie Ihre asynchrone Operation ausführen (z. B. einen API-Aufruf tätigen) und dann reguläre Aktionen versenden, um den Redux-Speicher zu aktualisieren, wenn die Operation abgeschlossen ist.

Hinweis: Redux Thunk ermöglicht sowohl asynchrone als auch synchrone Operationen, obwohl sein Hauptzweck darin besteht, asynchrone Aktionen zu erleichtern. Es hindert Sie nicht daran, synchrone Aktionen zu versenden; es bietet lediglich einen Mechanismus zur Behandlung asynchroner Operationen.Das wäre soweit erledigt, lassen Sie uns die React-Middleware in Aktion sehen, indem wir Redux Thunk implementieren.

Eine schrittweise Anleitung zur Implementierung von Redux Thunk

Die Implementierung von Redux-Middleware umfasst die folgenden Schritte:

Schritt 1: Richten Sie Up Redux mit Thunk ein

Erstellen Sie eine React-Anwendung und installieren Sie die Abhängigkeiten.

npx create-react-app newApp

Schritt 2: Installieren Sie Redux Thunk

Führen Sie den folgenden Befehl aus, um Redux Thunk zu installieren.

npm install redux-thunk

Schritt 3: Aktivieren Sie Thunk Middleware

Enable the Thunk middleware in the Redux store.

import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // Combine all reducers here

const store = configureStore({
reducer: rootReducer,
middleware: [thunk],
});

export default store;

Hinweis: Bei Verwendung von Redux Toolkit ist es nicht erforderlich, thunk explizit zu installieren.

Schritt 4: Schreiben der Async-Funktion

Ein Thunk gibt eine andere Funktion zurück, die die Argumente dispatch und getstate erhält, um den Status zu lesen oder Aktionen zu versenden. Hier ist der Beispielcode zum Abrufen von Daten:

// Aktionstypen
const START_FETCH = 'START_FETCH';
const FETCH_SUCCESS = 'FETCH_SUCCESS';
const FETCH_ERROR = 'FETCH_ERROR';

  // Aktionsersteller
const startFetch = () => ({ type: START_FETCH });
const fetchSuccess = (data) => ({ type: FETCH_SUCCESS, payload: data });
const fetchError = (error) => ({ type: FETCH_ERROR, payload: error });

  // Thunk-Aktion
export const fetchData = () => {
return async (dispatch, getState) => {
      dispatch(startFetch()); // Notify that the fetch has started

try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const data = await response.json();

        dispatch(fetchSuccess(data)); // Send the fetched data to the store
} catch (error) {
         dispatch(fetchError(error.message)); // Handle any errors
}
};
  };

Schritt 5: Behandeln von versendeten Aktionen im Reducer

Behandeln Sie die versendeten Aktionen, indem Sie den Reducer aktualisieren.

const initialState = {
data: [],
    isLoading: false,
    error: null,
};

export const dataReducer = (state = initialState, action) => {
switch (action.type) {
case START_FETCH:
return { ...state, isLoading: true, error: null };
case FETCH_SUCCESS:
return { ...state, isLoading: false, data: action.payload };
case FETCH_ERROR:
return { ...state, isLoading: false, error: action.payload };
default:
return state;
}
  };

Schritt 6: Versenden eines Thunks von einem Komponenten

Verwenden Sie den useDispatch-Hook, um Thunks in React-Projekten zu versenden.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchData } from './actions';

const DataComponent = () => {
const dispatch = useDispatch();
const { data, isLoading, error } = useSelector((state) => state.data);

useEffect(() => {
      dispatch(fetchData()); // Trigger the thunk to fetch data
}, [dispatch]);

if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;

return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
};

export default DataComponent;

Verwendung von createAsyncThunk

Das Redux Toolkit enthält eine eingebaute API, die eine hochrangige Logik für Async-Funktionen definiert, sie versendet und Fehler prompt behandelt. Bitte beachten Sie, dass dies eine Abstraktion für die spezifischen Anwendungsfälle von Async-Funktionen bietet, createAsyncThunk gilt nicht für alle Anwendungsfälle von Thunks.

Hier ist die Beispielimplementierung von createAsyncThunk:

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

export const dataFetch = createAsyncThunk('data/fetchData', async () => {
const response = await fetch('https://api.example.com/data');
return response.json();
});

const dataSlice = createSlice({
    name: 'data',
    initial_State: { data: [], loading: false, error: null },
extraReducers: (builder) => {
builder
.addCase(dataFetch.pending, (state) => {
          state.loading = true;
          state.error = null;
})
.addCase(dataFetch.fulfilled, (state, action) => {
          state.loading = false;
state.data = action.payload;
})
.addCase(dataFetch.rejected, (state, action) => {
          state.loading = false;
state.error = action.error.message;
});
},
});

export default dataSlice.reducer;

Um den dataFetch Thunk zu versenden, verwenden Sie den folgenden Code:

dispatch(dataFetch ());

Verwendung von React Middleware – Redux Thunk

Thunks können für verschiedene Zwecke verwendet werden, einschließlich, aber nicht beschränkt auf:

• Abstrahieren von komplexer Logik von den Komponenten.
• Ausführen von Async-Anfragen und Logik.
• Schreiben von Funktionen zum Versenden mehrerer Aktionen in Serie.

React Middleware in anderen Zustandsverwaltungsbibliotheken

Redux ist nicht die einzige React-Bibliothek, die Middleware verwendet. Sie finden sie auch in anderen Zustandsverwaltungsbibliotheken, obwohl die Implementierung dieses Konzepts in diesen Bibliotheken anders ist als in Redux.

MobX

MobX hat keine herkömmliche Middleware wie Redux. Es bietet ähnliche Funktionalitäten durch Mechanismen wie Interzeptoren, Beobachter und Reaktionen. Diese Mechanismen ermöglichen es Ihnen, Änderungen in Ihrem MobX-Zustand zu beobachten und darauf zu reagieren. Auf diese Weise bietet MobX Möglichkeiten, Nebenwirkungen, Protokollierung und andere Aufgaben zu behandeln, die Middleware in Redux typischerweise übernimmt.

Recoil

Recoil unterstützt Middleware nicht auf die gleiche Weise wie Redux, weil es nicht notwendig ist. Es ermöglicht Ihnen, Teile des Zustands (Atome) direkt mit spezifischen Funktionen zu aktualisieren. Es gibt kein Versenden von Aktionen an einen Reducer, die mit Middleware abgefangen werden können. Zur Behandlung von asynchronen Operationen verwendet es Selektoren – abgeleiteter Zustand, der von Atomen oder anderen Selektoren abhängt.

Zustand

Es hilft, Zustände mit einer einfachen API zu verwalten und unterstützt native Middleware für das Protokollieren und Speichern von Zuständen, genau wie Redux.

XState

XState unterstützt verhaltensähnliches Middleware-Verhalten unter Verwendung von Hooks wie onTransition, Aktionen, und Dienste. Diese Hooks helfen dabei, Zustandsübergänge abzufangen und zu modifizieren.

Conclusion

Middleware fungiert als Brücke, um verschiedene Komponenten einer Webanwendung zu verbinden und für einen besseren Datenfluss und -handling zu kombinieren. Sie werden seit langem im Backend weit verbreitet eingesetzt, haben aber mittlerweile auch Anwendungsfälle im Frontend gefunden.

In React gibt es verschiedene Möglichkeiten, Middleware zu implementieren. Sie sind in der Regel mit den Zustandsverwaltungsbibliotheken wie Redux und MobX verknüpft. Die am häufigsten verwendete React Middleware, Thunk, ist in der Redux-Bibliothek enthalten. Ein Thunk ist ein Codeblock, der verzögerte Aufgaben ausführt.

In diesem Artikel haben wir Middleware in React, die Redux-Bibliothek und Redux Thunk erkundet. Wir haben auch die Schritte zur Implementierung von Redux Thunk Middleware für das Abrufen von Daten und das Auslösen von Aktionen behandelt.