Mit React ist es möglich, komplexe Benutzeroberflächen zu bauen. Webapplikationen wie Facebook, Airbnb und Netflix benutzen ebenso React wie auch Host Europes Website, von der Sie dieses E-Book herunterladen können.
Je aufwendiger eine Applikation und je mehr Daten gleichzeitig verarbeitet werden, desto anspruchsvoller wird es, die Applikationsdaten zu verwalten und den Überblick über den aktuellen Zustand der Anwendung zu behalten. Wenn man diesen Zustand der Applikation organisiert, spricht man vom State-Management.
Der State einer Applikation kann sich von einem kleinen Detail bis hin zum Gesamtstatus der Applikation erstrecken. Im Prinzip kann alles als State betrachtet werden: Ist der Benutzer eingeloggt, welche Daten werden gerade angezeigt, ist das Menü auf- oder zugeklappt, wurde Text in ein Textfeld eingegeben, hat der Benutzer bereits das Cookie-Modal gesehen usw.
Zusammenfassend stellt sich beim Schreiben einer komplexen Applikation die Frage: In welchem Zustand oder Status befindet sich jetzt gerade die Applikation, und wie kann man diesen Status abbilden und Änderungen nachvollziehen?
Weitere Experten-Beiträge mit Tipps für die Arbeit mit React in unserem E-Book. E-Book React – Jetzt kostenlos downloaden!
Vom lokalen zum globalen State-Management
Wir wissen bereits aus vorangegangenen Kapiteln, dass eine React-Komponente selber einen lokalen State speichern kann. Wenn ein Komponenten-State Daten enthält, die von anderen Komponenten genutzt werden sollen, werden diese über Props an verschachtelte Unterkomponenten weitergegeben. In der Praxis bedeutet dies meist, dass die oberste Komponente innerhalb des Komponentenbaums den Zugriff auf veränderbare Daten im lokalen Komponenten-State hält und die Werte weitergibt. Wenn ein State-Wert durch Unterkomponenten geändert werden kann, gibt die oberste Komponente einen Action-Callback als Prop weiter, und die Unterkomponente kann damit den State der obersten Komponente ändern, die diese Änderungen wiederum zurück an die Unterkomponenten gibt.
Dies ist der übliche Datenfluss von React: Eine Aktion oder auch Event verändert den Zustand einer Komponente, die daraufhin den neuen Wert als Props an andere Komponenten weitergibt. Dies ist ein uni-direktionaler Datenaustausch, da – wie der Name schon sagt – die Daten nur in eine Richtung weitergegeben werden.
Uni-direktionaler Datenaustausch
Je komplexer aber die Datenstrukturen werden und je differenzierter das User Interface sein soll, das diese Daten anzeigt, desto aufwendiger wird es, diese Daten durch mehrere Komponentenebenen durchzureichen.
Für kleine, überschaubare Applikationen mag das zu verschmerzen sein, will man aber eine komplexe Oberfläche darstellen, deren einzelne Teilbereiche mit unterschiedlichen Datenquellen gerendert werden, kommt die Frage auf: Geht das nicht einfacher?
Hier kommt das globale State-Management ins Spiel, das den Zustand bzw. die notwendigen Daten einer Applikation unabhängig vom lokalen State der Komponenten in einer Art Container hält und den Komponenten zur Verfügung stellt.
Die Daten werden demnach nicht mehr durch einzelne Komponentenebenen durchgereicht, sondern eine tief verschachtelte Komponente kann sich direkt mit dem globalen State verbinden und hat Zugriff auf dessen Daten. Dies vereinfacht nicht nur den Datenfluss, sondern verhilft zu einer weit besseren Übersicht über den aktuellen Zustand der Applikation:
Was ist Redux?
Redux ist eine JavaScript-Bibliothek, die ein Konzept bereitstellt, durch das es möglich ist, den State einer Applikation zu lesen, zu ändern und abzubilden. Mit Redux wird ein Zustands-Container (Store) erstellt, der den globalen Applikations-Zustand verwaltet (State). Weiterhin hält der Store Methoden bereit, durch die der Zugriff zum State bereitgestellt wird und mit denen Daten im State verändert werden können:
- getState => Daten im State werden gelesen
- dispatch => Daten im State werden verändert
- subscribe => Callback, sobald der State geändert wurde
State
Der globale State wird in einem simplen Objektbaum innerhalb des Stores gespeichert und kann mit der Methode getState gelesen werden. Pro Applikation gibt es nur einen State, der als Basis dafür gilt, was die Applikation darstellt und wie sie sich verhält. Der State ist demnach die “Single Source of Truth” – die einzige Quelle der Wahrheit. Damit dies so bleibt, wird der State selber nie direkt manipuliert, sondern nur lesend zur Verfügung gestellt.
Action
Die einzige Möglichkeit, den State zu ändern, besteht darin, eine Aktion (action) mit der Methode dispatch auszulösen. Eine Action ist ein einfaches Objekt, das beschreibt, was sich ändern soll. Dieses Action-Objekt muss das Feld “type” enthalten, dessen Wert ein String ist und das den Namen der Action darstellt. Darüber hinaus kann das Action-Objekt individuell ausgebaut werden, um weitere Daten in der Action weiterzugeben.
Dafür werden Action Creators geschrieben. Dies sind simple Funktionen, deren Rückgabewert ein Action-Objekt ist:
Reducer
Actions werden durch Reducer verarbeitet, die darüber entscheiden, wie sich der State der Applikation ändern soll, nachdem mit dispatch eine Action an den Store geschickt wurde. Reducer sorgen dafür, dass das existierende State-Objekt nicht direkt verändert, sondern mit der Action ein neuer State erstellt wird.
Klassischerweise werden Reducer als switch-Statement geschrieben, jedoch kann man auch mit simplen if-Statements denselben Effekt erreichen oder Hilfswerkzeuge wie Redux Toolkit benutzen. Alle Möglichkeiten haben aber eins gemeinsam: Reducer verändern den State nicht direkt, sondern erstellen immer einen neuen State, der zurückgegeben wird. Reducer sind außerdem pure functions, die nicht auf externe Variablen zugreifen oder Seiteneffekte aufrufen und immer denselben Wert zurückgeben (siehe auch Wikipedia zu pure functions).
Store
Sobald Actions definiert und ein Reducer erstellt wurden, kann man den Redux Store initialisieren. Dafür stellt Redux die Methode createStore zur Verfügung, der man bei Aufruf einen Reducer als Argument mitgibt. Die Methode gibt daraufhin den Store zurück, der – wie oben gezeigt – die drei Methoden getState, dispatch und subscribe bereithält.
Letztendlich ist der Redux Store nur ein Objekt mit ein paar Methoden. Und mit dispatch werden weitere Objekte über die Reducer an den Store gegeben (Objekt mit type und payload), durch die im Reducer ein neuer State erstellt wird. Wir schieben also eigentlich nur simple Objekte mit synchronen Funktionen hin und her. Das ist fast alles.
Asynchrone Actions mit Middleware
Bei asynchronen Datenflüssen ist die Handhabung mit Redux allerdings ein bisschen aufwendiger.
Die oben beschriebenen Action Creators und Reducer beziehen sich auf eine synchrone Datenverarbeitung, die direkt auf dem Client (Browser) ausgeführt wird, ohne dass Netzwerk-Requests geschickt werden. In den meisten produktiven Applikationen werden jedoch Daten verarbeitet, die von einem Server kommen, indem Netzwerk-Requests zum Abrufen und Speichern von Daten zwischen Client und Server verschickt werden.
Ein Redux Store weiß nichts über asynchrone Datenflüsse und arbeitet jede Action durch die Reducer der Reihe nach ab, so wie sie an den Store mit dispatch geschickt wurden. Das bedeutet, dass asynchrone Datenverarbeitungen außerhalb des Stores erfolgen müssen. Dafür hat Redux das Konzept der Middleware erstellt, durch das es möglich ist, den Store um weitere Funktionen zu erweitern.
Eine Middleware ist das Zwischenstück zwischen Action und Reducer. Durch eine Middleware ist es möglich, eine Action zu ändern, zu erweitern, zu stoppen oder zu verzögern, bevor diese den Reducer erreicht. Wenn man also zum Beispiel Netzwerk-Requests an den Server schickt, will man zunächst das Ergebnis abwarten und danach entscheiden, ob der Redux-State durch eine Action aktualisiert werden muss. Da dies ein häufiger Anwendungsfall ist, stellt Redux die Middleware Redux-Thunk zur Verfügung, die für diesen Anwendungsfall genutzt werden kann und direkt beim Initialisieren des Stores mitgeben wird:
Redux-Thunk leistet Folgendes: Wird eine Action an den Store dispatched, die ein simples Action-Objekt zurückgibt, dann wird diese Action direkt an den Reducer weitergeleitet. Wird allerdings eine Action dispatched, die kein Objekt zurückgibt, sondern eine weitere Funktion, dann wird diese zurückgegebene Funktion mit den beiden Redux-Store-Methoden getState und dispatch aufgerufen. Dadurch ist es möglich, asynchrone Actions oder auch Thunk-Actions auszuführen, die Zugriff auf den State und die Methode dispatch haben.
Damit haben wir die fundamentalen Konzepte von Redux kennengelernt: Store, State, Actions, Reducer, Middleware und asynchrone Actions.
Redux DevTools
Um zu visualisieren, wie der State aussieht und welche Actions an den Store geschickt wurden, kann man die Redux DevTools installieren. Die dazugehörige Browser-Erweiterung hilft beim Debugging und State-Monitoring und ermöglicht es, die State-Veränderungen wieder rückgängig zu machen (Time-Travel). Wie die DevTools installiert werden, wird auf der offiziellen Website erklärt.
Hier eine Beispielansicht der DevTools Browser-Erweiterung:
Redux Toolkit
Redux empfiehlt vor allem Anfängern, die Bibliothek Redux Toolkit zu benutzen, wenn Redux in einer Applikation eingebunden werden soll. Redux Toolkit stellt diverse Funktionen zur Verfügung, die das Schreiben von Actions und Reducer sowie das Erstellen eines Stores vereinfachen. Ohne theoretischen Hintergrund allerdings ist auch Redux Toolkit nicht sofort zugänglich, weshalb er in diesem Artikel nicht behandelt wird.
Installation
Um Redux in einer React-Applikation zu benutzen, werden folgende Node-Pakete benötigt, die über die Kommandozeile installiert werden:
npm install redux redux-thunk react-redux
oder
yarn add redux redux-thunk react-redux
Redux-Thunk wird als Middleware installiert, damit die Applikation mit asynchronen Actions arbeiten kann.
Die Einbindung von Redux kann in den verschiedensten JavaScript-Applikationen erfolgen und beschränkt sich nicht nur auf die Nutzung von React. Deswegen gibt es für die Implementierung von Redux in eine React-Applikation eine offizielle React-Bindung: React Redux. Diese Bibliothek enthält React-Komponenten, die in einer React-Applikation benutzt werden können, um dadurch die Verwendung von Redux deutlich zu vereinfachen.
Erstellung von State-Struktur und Store
Sobald die Pakete installiert sind, sollte man sich Gedanken über die State-Struktur machen. Wie soll der State-Objektbaum aufgebaut werden, damit die Datenstruktur der Applikation sinnvoll aufgeteilt ist?Um die Beispiele aus den vorherigen Abschnitten zu erweitern, könnte ein einfacher State-Shape so aussehen:
{
user: {
firstName: ‘’,
lastName: ‘’,
age: ‘’
},
basket: {
productName: ‘’,
amount: 0
}
}
Dieser State ist sehr überschaubar und soll hier lediglich als Beispiel dienen. In einer produktiven Applikation wäre ein Redux State weitaus umfangreicher.
Wir bauen also eine einfache Applikation, bei der User-Daten angelegt und in einem Einkaufswagen (basket) ein Produkt und dessen Anzahl gespeichert werden können. Hierfür werden wir zwei Reducer erstellen: userReducer und basketReducer, die jeweils für den dazugehörigen Teil des States zuständig sein sind.
Der UserReducer und Actions:
REDUCER:
ACTIONS:
Der BasketReducer und Actions:
REDUCER:
ACTIONS:
Mit der Methode combineReducers von Redux ist es möglich, mehrere Reducer für verschiedene State-Objekt-Trees zuzuweisen. Ist dies getan, kann der Redux Store mit der Methode createStore erstellt werden:
Den Store an React-Komponenten weiterreichen
Mit React Redux wird die Komponente Provider eingebunden, die den Redux-Store für den Rest der Applikation verfügbar macht. Die Provider-Komponente wird auf der obersten Ebene des Komponentenbaums integriert:
Provider:
Über diese Provider-Komponente haben nun alle Unterkomponenten, die in der Provider-Komponente eingebunden sind, automagically über die Context-Schnittstelle von React Zugriff auf den Redux-Store.
Die Store-Methoden an React-Komponenten weiterreichen
Mit React-Redux müssen die eigenen React-Komponenten selbst niemals direkt auf den Store zugreifen. Dies erledigt connect von React-Redux für uns.
Connect ist eine Higher-Order-Komponente, eine Funktion, die eine React-Komponente mitgegeben bekommt und eine neue React-Komponente zurückgibt. Mit connect wird eine neue, mit dem Redux-Store verbundene Komponente erstellt, die auf Redux-Store Methoden wie dispatch und getState Zugriff hat.
const MyConnectedComponent = connect()(MyComponent);
Die übergebene React-Komponente wird nicht von connect geändert, sondern mit relevanten Props erweitert. Dadurch hat die mitgegebene React-Komponente die Möglichkeit, die für sie relevanten Daten aus dem State zu lesen und mittels Actions den State zu verändern.
Connect akzeptiert vier verschiedene Parameter, die alle optional sind:
const MyConnectedComponent = connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(MyComponent);
Für diesen Artikel schauen wir uns die ersten beiden Parameter an, da diese für die Anbindung an den Redux-Store relevant sind. Weitere Informationen zu den anderen Parametern gibt es auf der offiziellen Dokumentations-Seite von React-Redux.
mapStateToProps
Der mapStateToProps-Parameter ist eine Funktion, die jedes Mal aufgerufen wird, sobald sich der State geändert hat. Wurde connect mit mapStateToProps aufgerufen, verbindet sich die mit connect erstellte Komponente mit dem Redux-Store anhand der Methode store.subscribe(). Ändert sich der State, wird mapStateToProps mit dem State aufgerufen (store.getState()). Das Ergebnis von mapStateToProps ist ein Objekt, das als erweiterte Props an die gewrappte Komponente mitgegeben wird. Nur wenn sich die durch mapStateToProps zurückgegebenen State-Werte verändert haben, wird die verbundene Komponente mit den aktualisierten Props neu gerendert.
MapStateToProps akzeptiert zwei Parameter, wobei die zweite optional ist:
mapStateToProps: (state, ownProps) => object
Wird die mapStateToProps-Funktion mit nur einem Parameter deklariert, wird sie immer dann aufgerufen, wenn sich der Redux-State ändert. Das erste Argument ist in diesem Falle der gesamte Redux-State, bzw. das Ergebnis von store.getState():
const mapStateToProps = state => ({ user: state.user });
Wird die mapStateToProps-Funktion mit zwei Parametern deklariert, wird sie weiterhin immer aufgerufen, wenn sich der Redux-State ändert oder wenn sich die Props der Elternkomponente ändern, die hier als ownProps an die verbundene Komponente von connect weitergegeben werden.
mapDispatchToProps
Als zweites Argument von connect wird mapDispatchToProps deklariert, was relevant für das Dispatchen von Actions an den Store ist.
Wird mapDispatchToProps als Objekt mitgegeben, wird jedes Feld im Objekt als Action Creator behandelt und in der verbundenen Komponente von connect standardmäßig mit store.dispatch aufgerufen. Das bedeutet, dass man die bereits definierten Action Creators in mapDispatchToProps angeben kann, und connect kümmert sich darum, dass die verbundene Komponente diese Action bereits mit dispatch als Prop zur Verfügung gestellt bekommt.
Hinweis: Gibt man keine Action Creators an mapDispatchToProps weiter, sondern simple Action-Objekte, oder möchte man auch in mapDispatchToProps auf ownProps (die übergebenen Props der Elternkomponente) zugreifen, muss man mapStateToProps als Funktion deklarieren und nicht als Objekt. Die offizielle Dokumentation empfiehlt allerdings die Objekt-Schreibweise mit Action Creators. Sollte dies aus den genannten Gründen nicht ausreichen, gibt es auf der offiziellen React-Redux Website weitere Informationen.
Wir haben gesehen, wie man mit React-Redux einzelne React-Komponenten mit dem Redux-Store verbinden kann. Durch die Provider-Komponente wird der Redux-Store über den React-Context an untere Komponenten weitergereicht. Mit der Funktion connect wird auf diesen Store im React-Context zugegriffen und, wenn mapStateToProps und/oder mapDispatchToProps definiert wurden, als Props an die gewrappte React-Komponente weitergegeben. Dadurch muss die eigentliche React-Komponente nicht direkt mit dem Redux-Store kommunizieren, da sich connect “under the hood” um die Verbindung kümmert.
Beispiel User Komponente
Um den bereits oben definierten User-State mit firstName, lastName und age und die dazugehörigen Action Creators an React-Komponenten weiterzureichen, werden wir nun einige Komponenten definieren, die eine einfache Eingabeform rendern. Diese Eingabeform liest Daten aus dem Redux-State und verändert Daten im Redux-State bei jeder Texteingabe.
Als Erstes schreiben wir ein einfaches Eingabefeld als React-Komponente, die bei jeder Feldeingabe den Wert aufruft. Diese Komponente ist nicht mit dem Redux-Store verbunden:
Dieses Eingabefeld können wir nun für die drei User-State-Werte verwenden: firstName, lastName und age. Dafür schreiben wir eine User-Komponente, die dieses Eingabefeld drei Mal rendert und die mit dem Redux-Store durch die Funktion connect mit mapStateToProps und mapDispatchToProps verbunden ist:
Die Werte der Eingabefelder werden aus dem Redux-State state.user gelesen und bei jeder Texteingabe wiederum durch die Actions geändert, was ein erneutes Rendering der Komponenten mit dem aktualisierten State-Wert zur Folge hat.
Beispiel Basket Komponente
Ähnlich gehen wir vor, wenn wir Komponenten mit dem basket-State verbinden wollen.
Als Erstes rendern wir eine Liste von Beispiel-Produkten, aus denen der User eines auswählen kann.
Dafür schreiben wir eine Komponente, die sich um das Rendering eines einzelnen Produktes kümmert.
Diese Komponente bekommt von ihrer Elternkomponente die Prop “name”, die in mapStateToProps als ownProp weitergereicht wird. Darüber hinaus wird in mapStateToProps überprüft, ob diese Komponente gerade im State ausgewählt wurde, indem der Name über die ownProps mit dem aktuellen Wert im state.basket verglichen wird.
Die relevante Action, um das Produkt auszuwählen, kann in mapDispatchToProps weitergereicht werden. Sobald ein Produkt ausgewählt wird, wird der entsprechende Produktname in den Redux-State state.basket.productName gesetzt und die Komponente rendert sich entsprechend neu, da sie nun ausgewählt wurde (isSelected === true).
Um dem User anzuzeigen, welcher Produktname gerade ausgewählt ist, schreiben wir noch eine weitere Komponente, die sich nur um diese Anzeige kümmert, indem sie den Namen aus state.basket liest:
Auch wenn es sich bei der Komponente “SelectedProduct” um eine sehr kleine Komponente handelt, ist es grundsätzlich in Ordnung, verschiedene Komponenten mit connect aufzurufen bzw. verschachtelte Komponenten erneut direkt mit dem Store zu verbinden. Es handelt sich hierbei nicht um Performance-Einbußen, wie vor einiger Zeit teilweise noch angenommen wurde. Auf der offiziellen Dokumentations-Seite von Redux wird dies detaillierter beschrieben.
Mit dieser Architektur muss die Elternkomponente des Baskets nicht mit dem Redux-Store verbunden werden, da die Kinder-Komponenten bereits “schlau genug” sind und selber auf den State schauen oder diesen verändern. Allerdings erwarten die einzelnen Produktkomponenten eine “name” Prop von der Elternkomponente:
Für die Auswahl der Produkt-Anzahl erstellen wir eine einfache Komponente, die ebenso mit dem Redux-Store connected ist und den aktuellen amount aus dem basket-State liest und mit den beiden Actions incrementAmount und decrementAmount diesen Wert aktualisieren kann:
React-Redux mit Hooks
Seit der Version 7.1.0 von React-Redux gibt es eine Hook-Schnittstelle, die als Alternative zu der bestehenden connect-Funktion genutzt werden kann. Mit diesen neuen Hooks ist es nun möglich, eine React-Komponente direkt mit dem Redux-Store zu verbinden, ohne diese vorher mit connect aufzurufen. Dies macht auch das Definieren von mapStateToProps und mapDispatchToProps obsolet und reduziert einiges an Code.
useSelector
Mit dem useSelector-Hook ist es möglich, Daten aus dem Redux-State zu lesen. Somit verhält sich der Selector ähnlich wie mapStateToProps von der connect-Funktion. Ein Selector-Hook wird mit dem gesamten Redux-State aufgerufen und das jedes Mal, wenn sich die Komponente neu rendert und wenn sich der Redux-State durch das dispatchen einer Action ändert. Dabei vergleicht der Selector, ob sich der referenzierte State-Wert geändert hat und forciert nur dann eine erneutes Rendering. Da der Selector direkt in der React-Komponente deklariert wird und dadurch mehrfach aufgerufen werden kann, muss darauf geachtet werden, dass die Selector-Funktion eine pure function ist. Das heißt, die Funktion sollte keinen internen State halten oder Seiteneffekte aufrufen und immer denselben Wert zurückgeben (den State-Value, der gelesen wird).
Zum Vergleich hier eine einfache Komponente mit connect und mapStateToProps:
und mit Hooks:
useDispatch
Der useDispatch-Hook gibt eine Referenz zur store.dispatch()-Methode zurück und kann somit direkt in einer React-Komponente eingebunden werden. Im Gegensatz zum useSelector-Hook wird die Referenz zu dispatch nur einmal erstellt, und man muss sich keine Gedanken um ein erneutes Rendering machen.
Zum Vergleich hier eine einfache Komponente mit connect und mapDispatchToProps:
und mit Hooks:
Beispiel Basket Komponente mit Hooks
Zur Veranschaulichung bauen wir zwei Komponenten mit den Hooks von React-Redux um.
Die Komponente “Produkt” mit connect:
und umgebaut mit useSelector und useDispatch:
Die Komponte “SelectedProdukt” mit connect:
und umgebaut mit useSelector:
Die Elternkomponente kann so bleiben wie vorher, da sie auch nach Umbau nicht an den Redux-Store angebunden ist:
Asynchrone Action mit Redux-Thunk
Da wir bereits bei der Erstellung des Stores die Middleware Redux-Thunk eingebunden haben, ist es möglich, asynchrone Actions bzw. Thunk Actions an den Store zu schicken.
Zur Veranschaulichung erstellen wir hierfür eine weitere Komponente, die einen Submit-Button rendert und beim onClick-Handler eine asynchrone Action dispatched:
Wie bereits oben beschrieben, sorgt die Middleware Redux-Thunk dafür, wenn dispatch mit einem Action Creator aufgerufen wird, der nicht ein Action-Objekt, sondern eine Funktion zurückgibt, dass dann diese Funktion als Thunk-Action erkannt und mit dispatch und getState aufgerufen wird. Dadurch ist es möglich, innerhalb dieser Thunk-Action auf den aktuellen State zuzugreifen und andere Actions mit dispatch aufzurufen. In unserem Beispiel erstellen wir die Thunk-Action “submit”, die aus dem Redux-State die User-Daten und die Basket-Daten liest und diese an einen Server mit fetch schickt.
State-Management mit Redux für React – Fazit
Mit der Einbindung von Redux in eine React-Applikation bekommt man ein mächtiges Tool geliefert, um den Applikations-State zu organisieren. Auch wenn es einiges an Konzepten gibt, die man eingangs lernen muss und somit der Zugang gerade für Anfänger nicht einfach ist, lohnt es sich auf lange Sicht, mit dem globalen State-Management von Redux zu arbeiten, um eine Applikation übersichtlicher zu gestalten.
Das direkte Verbinden einer React-Komponente mit dem globalen Redux-State verhindert das Durchreichen verschiedener Props durch mehrere Komponentenebenen und macht dadurch einzelne Komponenten unabhängig von ihrer Verschachtelung im Komponentenbaum.
Globales State-Management mit Redux erfordert einiges an Boilerplate, um den Redux-Store mit Actions und Reducers zu implementieren. Doch hat man einmal das Redux-Konzept verinnerlicht, geht auch das leicht von der Hand. Mit der Installation von Redux DevTools sollte es gerade Anfängern leichter erscheinen, zu verstehen, wie der Redux-Flow mit Actions, Reducers und State funktioniert. Zudem wurde während der Erstellung dieses Kapitels die offizielle Redux-Dokumentation mit dem Fokus auf Redux-Toolkit aktualisiert, was ebenso die Hürde für Anfänger verringern soll.
- State-Management mit Redux für React - 18. März 2021
