Redux-Store und Provider einrichten

Redux Toolkit (RTK) ist heute die offizielle und empfohlene Methode zum Schreiben von Redux-Logik. Es beseitigt den umfangreichen Boilerplate-Code des klassischen Redux, indem es Hilfsfunktionen wie configureStore, createSlice und createAsyncThunk bereitstellt. RTK enthält standardmäßig bewährte Vorgehensweisen, etwa Immer für unveränderliche Aktualisierungen und die Integration der Redux DevTools.

Für den Einstieg in Redux Toolkit mit React Native benötigen Sie zwei Pakete: @reduxjs/toolkit stellt die zentralen Hilfsfunktionen bereit, und react-redux stellt die React-Anbindung bereit. Installieren Sie beide mit einem einzigen Befehl; anschließend können Sie sie sofort verwenden.

Der Store ist die zentrale Quelle der Wahrheit für den gesamten Redux-Anwendungsstatus. Sie erstellen ihn mit configureStore und übergeben ein reducer-Objekt, das Slice-Namen ihren Reducer-Funktionen zuordnet. RTK richtet automatisch die Redux DevTools ein und aktiviert empfohlene Middleware wie redux-thunk.

Die Provider-Komponente aus react-redux macht den Redux-Store für jede Komponente im React-Native-Komponentenbaum verfügbar. Umschließen Sie Ihre Root-Komponente oder bei Verwendung von React Navigation den NavigationContainer mit <Provider store={store}>. Jede Komponente innerhalb des Baums kann anschließend über Hooks auf den Store zugreifen.

Redux erzwingt einen strikten unidirektionalen Datenfluss: Die Benutzeroberfläche dispatcht eine action, der reducer verarbeitet diese Aktion und erzeugt einen neuen Status, der Store speichert den neuen Status und die Benutzeroberfläche rendert sich entsprechend erneut. Dieser vorhersehbare Ablauf erleichtert Debugging und Tests, weil sich jede Statusänderung auf eine bestimmte Aktion zurückführen lässt.

In TypeScript-Projekten ist es empfehlenswert, typisierte Versionen von useDispatch und useSelector zu erstellen, damit Sie in der gesamten App Autovervollständigung und Typsicherheit erhalten. Exportieren Sie useAppDispatch und useAppSelector aus einer Hooks-Datei und importieren Sie diese in Ihren Komponenten statt der ursprünglichen Hooks.

Der Schlüssel reducer in configureStore akzeptiert ein Objekt, in dem jeder Schlüssel zu einem Slice-Namen im globalen Status wird. Wenn Sie beispielsweise { counter: counterReducer, user: userReducer } übergeben, hat Ihr Status die Struktur { counter: {...}, user: {...} }. Sie können jederzeit weitere Slices hinzufügen, ohne vorhandene Slices zu ändern.

configureStore aktiviert im Entwicklungsmodus automatisch die Browsererweiterung Redux DevTools. Mit den DevTools können Sie den aktuellen Status untersuchen, jede dispatchte Aktion anzeigen und sogar zu einem vorherigen Status-Snapshot zurückkehren. Das ist einer der größten Vorteile von Redux beim Debugging gegenüber einfachem useState.

RTKs configureStore fügt standardmäßig mehrere Middleware hinzu: redux-thunk für asynchrone Action-Creator, eine serializability check-Middleware, die warnt, wenn nicht serialisierbare Werte (z. B. Funktionen oder Klasseninstanzen) im State abgelegt werden, sowie eine immutability check-Middleware, die warnt, wenn der State direkt verändert wird. Sie können dies mit der Option middleware anpassen.

Eine übersichtliche Ordnerstruktur erleichtert die Wartung von Redux-Apps. Üblicherweise gibt es einen Ordner store/ mit einer Datei index.ts für die Store-Konfiguration und einen Unterordner features/, in dem jedes Feature seine eigene Slice-Datei hat. Zum Beispiel: store/features/counter/counterSlice.ts. Halten Sie Slice-Dateien klein und konzentrieren Sie sie auf ein einzelnes Domänenkonzept.

Eine schnelle Plausibilitätsprüfung nach dem Einrichten des Providers besteht darin, in der Store-Datei store.getState() zu protokollieren. Dadurch wird der initiale State in der Konsole ausgegeben und bestätigt, dass die Reducer-Zuordnung korrekt strukturiert ist. Sobald Sie die erwartete Struktur sehen — zum Beispiel { counter: { value: 0 } } — wissen Sie, dass der Store bereit ist, von Komponenten gelesen und beschrieben zu werden.

In dieser Lektion haben Sie gelernt: Redux Toolkit reduziert Boilerplate-Code mit configureStore und integrierter Middleware, die Provider-Komponente macht den Store im gesamten Komponentenbaum zugänglich, und typisierte Hooks (useAppDispatch, useAppSelector) sorgen für TypeScript-Sicherheit in Ihrem Redux-Code. Als Nächstes sehen wir uns an, wie Sie mit createSlice Slices erstellen.