Redux Toolkit Schulung: Slices, Thunks und RTK Query in React

Warum Redux Toolkit – und wann nicht

• Client-Zustand, Serverzustand, URL- und Formularzustand unterscheiden
• Warum Redux Toolkit statt klassischem Redux: weniger Boilerplate, Immer, gute Defaults
• Wann Redux nicht nötig ist: useState, useReducer und Context als leichtere Wege
• Datenfluss in eine Richtung: Actions beschreiben Ereignisse, Reducer berechnen den Zustand
• Wie der Redux-Store funktioniert: dispatch, getState, Abonnements und Neurendern
• Slices mit createSlice: Name, Anfangszustand, Reducer und generierte Action-Creators
• Klassisches Redux im Bestand erkennen: createStore, Switch-Reducer, connect

Projekt und Store einrichten

• React-Basisprojekt mit Vite und TypeScript anlegen, Redux Toolkit und React Redux installieren
• Store mit configureStore: Reducer kombinieren, Middleware und Redux DevTools ohne Zusatzcode
• RootState und AppDispatch aus dem Store ableiten statt von Hand pflegen
• Provider einbinden und eine Store-Fabrik für Tests und serverseitiges Rendern
• Typisierte Hooks mit useSelector.withTypes() und useDispatch.withTypes()

Reducer, Actions und Selektoren

• Reducer in createSlice schreiben: scheinbar mutierender Code dank Immer
• Payloads mit PayloadAction typisieren, IDs und Zeitstempel im prepare-Callback erzeugen
• Actions und Reducer aus dem Slice exportieren und in Feature-Ordnern ablegen
• Auf Actions anderer Slices reagieren: extraReducers mit addCase und addMatcher
• Daten aktualisieren mit dem useDispatch-Hook aus Ereignis-Handlern heraus
• Daten abrufen mit dem useSelector-Hook: kleine Selektoren statt ganzer Slices
• Memoisierte Selektoren mit createSelector für gefilterte und sortierte Listen
• Daten anzeigen: Listen- und Detailkomponenten, abgeleitete Werte aus dem Store
• Listen normalisieren mit createEntityAdapter und dessen fertigen Selektoren

Asynchrone Logik mit Thunks und Listenern

• API-Daten mit createAsyncThunk abrufen: pending, fulfilled und rejected
• Lade- und Fehlerstatus im Slice abbilden und in Komponenten auswerten
• Zugriff auf abgerufene Daten: unwrap(), rejectWithValue und Abbruch per signal
• Daten aus mehreren Quellen abrufen und zusammenführen: parallele und verkettete Thunks
• Seiteneffekte auf Actions mit createListenerMiddleware, z. B. Speichern im localStorage
• Slices bei Bedarf nachladen mit combineSlices und Code-Splitting

RTK Query

• Endpunkte zentral beschreiben mit createApi und fetchBaseQuery
• Generierte Query- und Mutation-Hooks in Komponenten verwenden
• Cache-Invalidierung mit providesTags und invalidatesTags
• Optimistische Aktualisierung mit onQueryStarted und updateQueryData, Rücknahme bei Fehlern
• Mehrere Backends: getrennte API-Slices und injectEndpoints für Feature-Module
• Endpunkte aus einer OpenAPI-Beschreibung generieren mit @rtk-query/codegen-openapi
• Überblick: RTK Query oder TanStack Query – Entscheidungskriterien, Details im eigenen Seminar

Redux-Code testen und debuggen

• Redux DevTools: Action-Verlauf, Zustandsdiffs und Zeitreise durch den Store
• Reducer und Selektoren als reine Funktionen mit Vitest testen
• Komponenten mit frisch erzeugtem Store testen statt Hooks zu mocken
• API-Aufrufe in Thunk- und RTK-Query-Tests mit Mock Service Worker abfangen

Redux-Bestand mit einem Coding-Agenten modernisieren

• Agent überführt connect-Komponenten und Switch-Reducer nach Redux Toolkit – Reducer-Tests laufen vorher
• Serialisierbarkeits- und Immutability-Warnungen von configureStore als Fehlersignal für den Agenten
• Generierte Slices prüfen: API-Antworten gehören in RTK Query, nicht in handgebaute Ladeflags
• Agent erzeugt RTK-Query-Endpunkte aus der OpenAPI-Datei; Tags und Invalidierung prüft ein Mensch
• Exportierte Action-Folge aus den Redux DevTools als Reproduktion für den Agenten bei Zustandsfehlern

Praxisprojekt: Ticket-Board für ein Support-Team

• Filter, Sortierung und Spaltenlayout des Boards als Client-Zustand in Slices
• Tickets per RTK Query laden, Statuswechsel per Drag-and-drop mit optimistischer Aktualisierung
• Ungespeicherte Ticket-Entwürfe über die Listener-Middleware im localStorage sichern
• Tests mit Vitest und Mock Service Worker, Fehlersuche mit den Redux DevTools