Redux: Was es ist, Zustandsverwaltungsmuster in React Native
Redux ist ein vorhersagbarer Container für die Zustandsverwaltung von JavaScript-Anwendungen, erstellt von Dan Abramov im Jahr 2015. Redux implementiert einen unidirektionalen Datenfluss basierend auf der Flux-Architektur: Der Zustand wird in einem einzigen Store gespeichert, nur durch reine Reducer-Funktionen geändert und über Action mit Dispatch initiiert. Laut npm Trends verzeichnet Redux weiterhin über 7 Millionen wöchentliche Downloads und bleibt der Standard für die Zustandsverwaltung in React Native und Webanwendungen.
Wichtige Punkte
- Store — die einzige Quelle der Wahrheit, die den gesamten Zustandsbaum der Anwendung speichert
- Action — ein Objekt mit dem Feld type, das die Absicht beschreibt, den Zustand zu ändern
- Reducer — eine reine Funktion (prevState, action) => newState ohne Nebenwirkungen
- Dispatch — die Store-Methode zum Senden einer Action an den Reducer
- Middleware — eine Schicht zwischen dispatch und reducer für asynchrone Operationen und Protokollierung
Was ist Redux?
Redux ist ein Architekturmuster und eine Bibliothek für die Zustandsverwaltung, basierend auf drei Prinzipien: einzige Quelle der Wahrheit, schreibgeschützter Zustand und Änderungen durch reine Funktionen. Im Gegensatz zu MVC, wo das Modell den Zustand unvorhersehbar ändern kann, garantiert Reduz Determinismus: Bei gleichen Eingabedaten ist das Ergebnis immer gleich.
Redux wurde von der Flux-Architektur von Facebook und der Sprache Elm inspiriert. Der Hauptunterschied zu Flux ist ein einzelner Store anstelle mehrerer. In Redux wird der gesamte Anwendungszustand — Objekte, Arrays, Lade-Flags — in einem einzigen Baum gespeichert. Dies vereinfacht das Debugging, Testen und Time-Travel-Debugging. Der Entwickler kann den gesamten Store speichern, eine Sequenz von Actions abspielen und sehen, wie sich der Zustand bei jedem Schritt verändert hat.
Laut der State of JS 2025-Umfrage wählen 68% der Befragten, die Zustandsverwaltung verwenden, Redux oder Redux Toolkit. Das Tool wird von allen modernen Frameworks unterstützt: React, React Native, Angular, Vue und sogar Vanilla JavaScript ohne Frameworks.
Unidirektionaler Datenfluss
Unidirektionaler Datenfluss ist das Schlüsselprinzip von Redux, bei dem Daten streng in eine Richtung fließen: View → Action → Dispatch → Reducer → Store → View. Kein Komponente kann den Store direkt ändern. Eine View abonniert nur Änderungen über useSelector oder connect und initiiert Änderungen über dispatch.
Redux-Workflow-Zyklus: Der Benutzer klickt auf einen Button → die Komponente ruft dispatch({ type: 'INCREMENT' }) auf → der Store übergibt die Action an den Root Reducer → der Reducer berechnet einen neuen Zustand → der Store benachrichtigt Abonnenten → die View wird mit neuen Daten neu gerendert. Dieser Zyklus garantiert, dass jede Änderung eine explizite Ursache in Form einer bestimmten Action hat.
DevTools — ein integriertes Redux-Tool zur Überwachung jeder Action, des Store-Zustands und der Ausführungszeit. Der Entwickler sieht eine Liste aller ausgelösten Actions, den Zustandsunterschied (diff) vor und nachher und kann zu jedem vorherigen Zustand zurückkehren. Dies macht das Debugging komplexer Zustände um ein Vielfaches schneller im Vergleich zur herkömmlichen Protokollierung.
Kernkomponenten von Redux
Store — ein Objekt, das den vollständigen Anwendungszustandsbaum enthält. Wird über configureStore (RTK) oder createStore erstellt. Store bietet drei Methoden: getState() zum Lesen, dispatch(action) zum Ändern und subscribe(listener) zum Abonnieren. In Redux Toolkit enthält Store bereits Middleware, DevTools und Slice-Unterstützung.
TypeScript
import { configureStore } from '@reduxjs/toolkit'
interface CounterState {
value: number
}
const initialState: CounterState = { value: 0 }
function counterReducer(
state = initialState,
action: { type: string }
): CounterState {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
default:
return state
}
}
const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }Action und Action Creator — Eine Action ist ein Objekt mit dem obligatorischen type-Feld (eine String-Konstante) und optionalem payload (Daten). Ein Action Creator ist eine Funktion, die eine Action zurückgibt. In Redux Toolkit wird createAction verwendet, um Actions mit automatischer Typisierung zu erzeugen.
Reducer — eine reine Funktion, die den aktuellen Zustand und eine Action erhält und einen neuen Zustand zurückgibt. Ein Reducer darf nicht: den Zustand mutieren (ein neues Objekt wird zurückgegeben), APIs aufrufen, Zufallszahlen generieren oder auf Date zugreifen. Die Unveränderlichkeit wird durch den Spread-Operator ... oder Immer (in RTK integriert) gewährleistet.
| Komponente | Verantwortung | Einschränkungen |
|---|---|---|
| Store | Speicherung des Zustands, dispatch, subscribe | Einer pro Anwendung |
| Action | Beschreibung der Absicht, den Zustand zu ändern | Muss type haben |
| Reducer | Berechnung eines neuen Zustands | Reine Funktion, keine Nebenwirkungen |
| Dispatch | Senden einer Action an den Reducer | Standardmäßig synchron |
| Selector | Extrahieren von Daten aus dem Store | Memoisierung über createSelector |
Middleware und Redux Thunk
Middleware ist eine Kette von Funktionen, die zwischen dem dispatch-Aufruf und dem Moment, in dem die Action den Reducer erreicht, eingefügt wird. Jede Middleware erhält die Store-API und kann Actions protokollieren, modifizieren, verzögern oder abbrechen. Redux Thunk ist die Standard-Middleware für asynchrone Operationen, die das Dispatchen von Funktionen anstelle von Objekten ermöglicht.
JavaScript
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUser = createAsyncThunk(
'users/fetchById',
async (userId: number, { rejectWithValue }) => {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok)
return rejectWithValue('Failed to fetch')
return await response.json()
}
)Beliebte Middleware: Redux Thunk — für einfache asynchrone Aufrufe, Redux Saga — für komplexe Szenarien mit Generator-Sagas (Debounce, Race, parallele Anfragen), Redux Observable — basierend auf RxJS für reaktive Streams. In Redux Toolkit wird Middleware über den Parameter middleware in configureStore verbunden.
Laut der State of JS 2025-Umfrage wird Thunk in 72% der Redux-Projekte verwendet, Saga in 18% und Observable in 5%. Für die meisten Anwendungen reicht eine Kombination aus Thunk + RTK Query aus, um 95% der asynchronen Daten-Workflows abzudecken.
Redux Toolkit und RTK Query
Redux Toolkit (RTK) ist die offizielle, empfohlene Methode zum Schreiben von Redux-Logik, veröffentlicht im Jahr 2019. RTK enthält configureStore, createSlice, createAsyncThunk und createEntityAdapter und reduziert den Redux-Boilerplate um 60-70%. Anstatt manuell Action Creators, Reducers und Typen zu erstellen, wird ein einzelner createSlice verwendet.
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) { state.value += 1 },
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
}
}
})
export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducerRTK Query ist eine integrierte Lösung für die Arbeit mit APIs auf Basis von Redux Toolkit. Es ermöglicht die deklarative Definition von Endpunkten über createApi mit automatischer Hook-Generierung, Caching, Tag-Invalidierung und optimistischen Updates. RTK Query ersetzt das manuelle Schreiben von Thunk, Reducer und Selector für jeden API-Aufruf.
Entity Adapter — das createEntityAdapter-Dienstprogramm zur Normalisierung von Entitätssammlungen. Bietet integrierte CRUD-Reducer, Selektoren und Sortierung für Objekt-Arrays. Wenn der Store Listen von Benutzern, Produkten oder Bestellungen enthält, reduziert Entity Adapter den Reducer-Code um 80%.
Redux in React Native
React Native Redux ist der Standard-Stack für mobile Anwendungen in JavaScript. Redux wird über Provider von react-redux integriert, der die root-Anwendungskomponente umschließt. Die Hooks useSelector und useDispatch geben Komponenten Zugriff auf den Zustand ohne Props Drilling. Persist — redux-persist speichert den Store in AsyncStorage oder MMKV und stellt den Zustand nach einem Neustart der Anwendung wieder her.
Middleware für React Native: redux-flipper zum Debuggen über Flipper, redux-observable für reaktive Streams mit nativen Treibern, react-native-mmkv für schnellen persistenten Speicher. Das Navigations-Plugin redux-first-router verbindet Bildschirme mit dem Store und ermöglicht die Wiederherstellung des Bildschirmzustands bei der Rückkehr.
In React Native wird Redux zusammen mit einer Network-First-Strategie verwendet: Die App versucht zunächst, Daten vom Server zu laden, und speichert sie dann über RTK Query oder redux-persist im Store zwischen. Der Offline-Modus wird durch die Kombination von Redux + NetInfo + einer Warteschlange von Actions zum erneuten Senden bei Wiederherstellung der Verbindung erreicht.
Häufig gestellte Fragen
Wie unterscheidet sich Redux von der Context API in React?
Redux ist eine vollwertige Lösung mit Store, DevTools, Middleware und unveränderlichem Zustand. Context API ist ein integrierter React-Mechanismus zum Übergeben von Daten ohne Props Drilling. Context eignet sich für globale Designs und Lokalisierung, während Redux für komplexe Zustände mit asynchronen Operationen, Caching und Debugging geeignet ist. In großen Anwendungen verursacht Context unnötige Neurenderings, während Redux mit Selektoren dieses Problem löst.
Was ist Immer in Redux Toolkit?
Immer ist eine Bibliothek für unveränderliche Zustandsverwaltung, die in Redux Toolkit integriert ist. Immer ermöglicht es, Reducer so zu schreiben, als ob man den Zustand direkt mutieren würde: state.value += 1. Unter der Haube erstellt Immer ein Proxy-Objekt (draft), verfolgt Änderungen und gibt ein neues unveränderliches Objekt zurück. Dies reduziert den Reducer-Code um 50% und eliminiert versehentliche Mutationen.
Wie testet man Redux?
Redux-Logik wird isoliert getestet: Reducer — eine reine Funktion, einfach mit verschiedenen Actions aufrufen und das Ergebnis überprüfen. Action Creator — das zurückgegebene Objekt überprüfen. Thunk — die API mocken, dispatch aufrufen und überprüfen, welche Actions ausgelöst wurden. Komponente mit useSelector — Provider mit einem Test-Store im Renderer verwenden. Redux DevTools helfen beim Schreiben von Tests, indem sie eine Action-Sequenz aus einer realen Sitzung abspielen.
Wann sollte man Redux anstelle von useState verwenden?
useState ist ausreichend für den lokalen Zustand einer einzelnen Komponente: Feldtext, Modal öffnen/schließen. Redux wird benötigt, wenn der Zustand zwischen vielen Bildschirmen geteilt wird, asynchrone Synchronisierung (Daten vom Server) erfordert, zwischen Anwendungsneustarts erhalten bleiben muss (persist) oder Time-Travel-Debugging erfordert. Für kleine Anwendungen ist Redux überdimensioniert — verwenden Sie stattdessen Context + useReducer.
Was ist Normalisierung in Redux?
Normalizr ist eine Bibliothek zur Normalisierung verschachtelter Daten in eine flache Store-Struktur. Anstatt tiefe Objekte wie user.posts[0].comments zu speichern, erstellt die Normalisierung Wörterbücher: entities.users, entities.posts, entities.comments mit Referenzen nach ID. Dies vereinfacht die Aktualisierung einer einzelnen Entität an allen Stellen und beschleunigt Selektoren. Redux Toolkit empfiehlt normalisierte Daten für komplexe Modelle.
Zusammenfassung
- Redux — ein vorhersagbarer Zustandscontainer mit einem einzigen Store und reinen Reducern
- Action — ein Objekt mit type, Reducer — eine reine Funktion, Dispatch — der Sendemechanismus
- Redux Toolkit — die offizielle API mit createSlice, createAsyncThunk und RTK Query
- Middleware — eine Schicht für Asynchronität: Thunk, Saga, Observable
- React Native wird über Provider, useSelector und redux-persist für den Offline-Modus integriert
- DevTools — Time-Travel-Debugging mit Wiedergabe jeder Action
- Normalizr — Datenormalisierung für effiziente Selektoren und Aktualisierungen
Wir entwickeln eine mobile Applikation schlüsselfertig
IT Sectr entwickelt seit 2017 iOS- und Android-Apps für Startups und Unternehmen. Wir beraten Sie und schlagen die beste Lösung vor.
Lesen Sie auch