Der Status kann komplex sein, und es ist wichtig, dies zu verstehen, um zu verstehen,
welche Probleme State-Management-Lösungen wie Redux tatsächlich lösen.
Wenn wir eine App wie diese hätten, die nicht die von uns erstellte App ist, sondern eine App sein könnte, die
Sie erstellen, in der Sie zwei verschiedene Bereiche haben, einen, in dem Sie Ihre Benutzer verwalten, in dem sich Benutzer
anmelden können, in dem Benutzer ihre verwalten können Dashboard, sehen Sie ihr Dashboard und so weiter und eines,
wo Sie Produkte in einer Liste haben,
die Benutzer zu einem Warenkorb hinzufügen können, dann sind diese Bereiche eigentlich nicht völlig unabhängig, aber in Ihrer App werden
sie auf verschiedenen Bildschirmen gerendert, also ziemlich getrennt von gegenseitig.
Die Frage, ob ein Benutzer signiert ist, den Sie hier benötigen, könnte jedoch auch in einem anderen
Teil Ihrer Anwendung relevant
sein. Im Moment müssten Sie diese Daten normalerweise manuell über Requisiten weitergeben, indem Sie sie von Komponente A
nach B nach C an übergeben D bis nach E, wo Sie das dann vielleicht
brauchen, das ist nicht wirklich sehr praktisch.
Stattdessen möchten Sie ein Anwendungssetup haben, bei dem sich etwas ändert, z. B. ein Benutzer, der sich in
oder in
unserer Essens-App anmeldet. Sie legen einen bestimmten Filter fest und speichern diesen. Diese Informationen werden dann an Ihre App weitergegeben
und automatisch an die Orte weitergeleitet Wo Sie es brauchen, aber nicht
durch Requisiten, sondern mit einigen Mechanismen hinter den Kulissen, die Ihnen dabei helfen. Hier ist Redux eine gängige
Lösung, die wir in React- und React Native-Apps verwenden, um diesen Status zu verwalten.
Wie funktioniert nun Redux?
Zunächst einmal ist Redux eine Drittanbieter-Bibliothek, die Sie zu React Native hinzufügen können, um sie dort
zu verwenden, und es geht nur um einen zentralen Speicher. Redux führt einen zentralen Speicher im Speicher ein,
nicht eine Datenbank, sondern einen Speicher im Javascript-Speicher, um zu sagen, wo sich Ihr Anwendungsstatus befindet, sodass die
Daten, von denen verschiedene Teile Ihrer App abhängen, in einer Komponente gespeichert werden können Etwas, das
diesen Zustand
manipulieren möchte, zum Beispiel einen Filter setzen oder eine Mahlzeit als
Favorit markieren, dann eine sogenannte Aktion auslösen, das ist ein vordefiniertes Informationspaket, das Sie sagen würden, mit
einem bestimmten Schema, das von Redux wie von Ihnen konfiguriert behandelt werden kann.
Diese Aktion erreicht einen sogenannten Reduzierer, und Sie sind derjenige, der diesen Reduzierer als Entwickler
schreibt, sodass Sie steuern können, welche Art von Aktion ein Reduzierer akzeptiert, welche Art
von Informationspaket Ihr Reduzierer benötigt und dieser Reduzierer dann die Aktion und erhält leitet einen neuen Status basierend auf
dem alten Status ab, der diesen zentral gespeicherten Status aktualisiert. Der Reduzierer ist also da, um den
Status am Ende zu aktualisieren.
Und wenn sich dieser Speicher ändert, wenn sich der Status dort ändert, können Sie auch Abonnements für diesen
Speicher von anderen Komponenten haben. Diese Abonnements werden ausgelöst, wenn sich Ihr Speicher ändert, wenn sich
Ihr Status dort ändert und der aktualisierte Status dann an die Orte weitergeleitet wird
In Ihrer App, also für die Komponenten, die an diesen Änderungen interessiert
sind, könnte diese Komponente hier beispielsweise an einigen Updates interessiert sein. Dann kann sie ein
Abonnement einrichten und wird über das
Update informiert und erhält den neuen Status Requisiten oder auch mit React Hooks, wie Sie in diesem Modul lernen werden.
So funktioniert Redux und das ist die Idee hinter Redux.
Nun ein wichtiger Hinweis: Wenn Sie etwas weiter in React sind, kennen Sie wahrscheinlich auch die React Context
API, die in React integriert ist.
Dies kann auch für einige Status- und Datenverwaltungen hinter den Kulissen verwendet werden, ist jedoch kein guter Ersatz für
alle Anwendungsfälle, in denen Sie Redux verwenden.
Ich werde hier nicht näher darauf eingehen, da dies nicht wirklich ein Kurs über die Vor- und Nachteile verschiedener React-Konstrukte
ist. Stattdessen möchten wir hier React Native lernen, aber im Anhang finden Sie einige Ressourcen, die Ihnen bei diesem Vergleich helfen
zwischen React Context API und Redux und wann welche verwendet werden sollen. In diesem Modul verwenden wir Redux, das sehr flexibel ist und
das wir definitiv verwenden können, und ich werde Ihnen zeigen, wie Sie es mit React
Native einrichten und wie Sie dann natürlich damit arbeiten können.