Datenaustausch zwischen einer Redux-Anwendung und einem Server

Dieser Abschnitt ist für anspruchsvolle Lernende gedacht, die bei Redux nicht auf dem Erreichten stehen geblieben sind und beschlossen haben, bis zum Ende dieses Tutorials durchzuhalten. In den nächsten beiden Abschnitten werden wir die Arbeit einer Redux-Anwendung mit asynchroner Logik behandeln, unsere Anwendung mit dem Backend verbinden und sie lehren, Daten mit ihm auszutauschen.

Aus vorherigen Abschnitten wissen wir, dass die Funktionsweise einer Redux-Anwendung auf einem synchronen Mechanismus basiert. Die Hauptschritte der Arbeit bestehen im Senden von Actions bei Auftreten eines Ereignisses in der Anwendung, dann der Aktualisierung des States im Store durch die Reducer-Funktion, der Benachrichtigung der Komponenten der Anwendung über die State-Änderung und entsprechend der Darstellung des neuen State-Werts in den Komponenten.

Im realen Leben kommt es oft vor, dass eine Anwendung auch asynchrone Logik benötigt, zum Beispiel bei der Arbeit mit HTTP-API-Anfragen und dem Erhalt von Daten von einem externen Server. Daher wird, damit unser 'synchroner' Redux-Store mit solcher asynchronen Logik arbeiten kann, eine sogenannte Middleware verwendet - eine Software, die als Vermittler oder Bindeglied zwischen dem Store unserer Anwendung und, beispielsweise, einem Server fungiert, mit dem wir in diesem Kapitel des Tutorials beginnen werden.

Für Redux wurden viele solcher Middlewares erstellt, jedoch ist die am weitesten verbreitete unter ihnen und die offiziell empfohlene für die Arbeit von Redux- Anwendungen mit asynchroner Logik nach wie vor Redux Thunk. Diese Software hilft uns, gewöhnliche Funktionen (oder Thunks) zu verwenden, die asynchrone Logik enthalten können, wie setTimeout, Promises, async/await, um mit unserem Store zu interagieren. Was den Begriff selbst betrifft, ein Thunk ist Code, der eine Art verzögerte Arbeit erledigt.

Nun, da wir uns ein wenig damit vertraut gemacht haben, wie wir in Redux mit asynchroner Logik arbeiten können, können wir mit der Implementierung dieser Phase in unserer Anwendung beginnen. Wir müssen dafür sorgen, dass unsere Anwendung mit einem externen Server interagieren kann, indem sie Daten von ihm empfängt und an ihn überträgt. Mit anderen Worten, es erwartet uns ein spannendes und sehr wichtiges Thema. Fangen wir an.