1 00:00:02,570 --> 00:00:08,780 Der Status kann komplex sein, und es ist wichtig, dies zu verstehen, um zu verstehen, 2 00:00:08,780 --> 00:00:12,220 welche Probleme State-Management-Lösungen wie Redux tatsächlich lösen. 3 00:00:12,320 --> 00:00:17,930 Wenn wir eine App wie diese hätten, die nicht die von uns erstellte App ist, sondern eine App sein könnte, die 4 00:00:17,930 --> 00:00:23,180 Sie erstellen, in der Sie zwei verschiedene Bereiche haben, einen, in dem Sie Ihre Benutzer verwalten, in dem sich Benutzer 5 00:00:23,180 --> 00:00:28,100 anmelden können, in dem Benutzer ihre verwalten können Dashboard, sehen Sie ihr Dashboard und so weiter und eines, 6 00:00:28,100 --> 00:00:30,100 wo Sie Produkte in einer Liste haben, 7 00:00:30,100 --> 00:00:35,480 die Benutzer zu einem Warenkorb hinzufügen können, dann sind diese Bereiche eigentlich nicht völlig unabhängig, aber in Ihrer App werden 8 00:00:35,480 --> 00:00:38,290 sie auf verschiedenen Bildschirmen gerendert, also ziemlich getrennt von gegenseitig. 9 00:00:38,630 --> 00:00:44,630 Die Frage, ob ein Benutzer signiert ist, den Sie hier benötigen, könnte jedoch auch in einem anderen 10 00:00:44,630 --> 00:00:46,100 Teil Ihrer Anwendung relevant 11 00:00:46,280 --> 00:00:52,550 sein. Im Moment müssten Sie diese Daten normalerweise manuell über Requisiten weitergeben, indem Sie sie von Komponente A 12 00:00:52,550 --> 00:00:57,930 nach B nach C an übergeben D bis nach E, wo Sie das dann vielleicht 13 00:00:57,970 --> 00:01:00,490 brauchen, das ist nicht wirklich sehr praktisch. 14 00:01:00,500 --> 00:01:06,980 Stattdessen möchten Sie ein Anwendungssetup haben, bei dem sich etwas ändert, z. B. ein Benutzer, der sich in 15 00:01:06,980 --> 00:01:07,900 oder in 16 00:01:07,910 --> 00:01:15,080 unserer Essens-App anmeldet. Sie legen einen bestimmten Filter fest und speichern diesen. Diese Informationen werden dann an Ihre App weitergegeben 17 00:01:15,080 --> 00:01:19,420 und automatisch an die Orte weitergeleitet Wo Sie es brauchen, aber nicht 18 00:01:19,520 --> 00:01:26,120 durch Requisiten, sondern mit einigen Mechanismen hinter den Kulissen, die Ihnen dabei helfen. Hier ist Redux eine gängige 19 00:01:26,120 --> 00:01:31,370 Lösung, die wir in React- und React Native-Apps verwenden, um diesen Status zu verwalten. 20 00:01:31,370 --> 00:01:33,170 Wie funktioniert nun Redux? 21 00:01:33,200 --> 00:01:38,420 Zunächst einmal ist Redux eine Drittanbieter-Bibliothek, die Sie zu React Native hinzufügen können, um sie dort 22 00:01:38,450 --> 00:01:45,050 zu verwenden, und es geht nur um einen zentralen Speicher. Redux führt einen zentralen Speicher im Speicher ein, 23 00:01:45,110 --> 00:01:51,950 nicht eine Datenbank, sondern einen Speicher im Javascript-Speicher, um zu sagen, wo sich Ihr Anwendungsstatus befindet, sodass die 24 00:01:51,950 --> 00:01:58,070 Daten, von denen verschiedene Teile Ihrer App abhängen, in einer Komponente gespeichert werden können Etwas, das 25 00:01:58,070 --> 00:01:59,280 diesen Zustand 26 00:01:59,330 --> 00:02:03,740 manipulieren möchte, zum Beispiel einen Filter setzen oder eine Mahlzeit als 27 00:02:03,770 --> 00:02:10,610 Favorit markieren, dann eine sogenannte Aktion auslösen, das ist ein vordefiniertes Informationspaket, das Sie sagen würden, mit 28 00:02:10,610 --> 00:02:15,840 einem bestimmten Schema, das von Redux wie von Ihnen konfiguriert behandelt werden kann. 29 00:02:15,860 --> 00:02:20,800 Diese Aktion erreicht einen sogenannten Reduzierer, und Sie sind derjenige, der diesen Reduzierer als Entwickler 30 00:02:20,810 --> 00:02:25,270 schreibt, sodass Sie steuern können, welche Art von Aktion ein Reduzierer akzeptiert, welche Art 31 00:02:26,060 --> 00:02:32,180 von Informationspaket Ihr Reduzierer benötigt und dieser Reduzierer dann die Aktion und erhält leitet einen neuen Status basierend auf 32 00:02:32,480 --> 00:02:39,670 dem alten Status ab, der diesen zentral gespeicherten Status aktualisiert. Der Reduzierer ist also da, um den 33 00:02:39,660 --> 00:02:42,500 Status am Ende zu aktualisieren. 34 00:02:42,500 --> 00:02:48,080 Und wenn sich dieser Speicher ändert, wenn sich der Status dort ändert, können Sie auch Abonnements für diesen 35 00:02:48,080 --> 00:02:53,050 Speicher von anderen Komponenten haben. Diese Abonnements werden ausgelöst, wenn sich Ihr Speicher ändert, wenn sich 36 00:02:53,090 --> 00:02:57,340 Ihr Status dort ändert und der aktualisierte Status dann an die Orte weitergeleitet wird 37 00:02:57,380 --> 00:03:01,040 In Ihrer App, also für die Komponenten, die an diesen Änderungen interessiert 38 00:03:01,040 --> 00:03:05,720 sind, könnte diese Komponente hier beispielsweise an einigen Updates interessiert sein. Dann kann sie ein 39 00:03:05,900 --> 00:03:08,190 Abonnement einrichten und wird über das 40 00:03:08,190 --> 00:03:14,130 Update informiert und erhält den neuen Status Requisiten oder auch mit React Hooks, wie Sie in diesem Modul lernen werden. 41 00:03:14,240 --> 00:03:19,620 So funktioniert Redux und das ist die Idee hinter Redux. 42 00:03:19,700 --> 00:03:27,020 Nun ein wichtiger Hinweis: Wenn Sie etwas weiter in React sind, kennen Sie wahrscheinlich auch die React Context 43 00:03:27,050 --> 00:03:29,770 API, die in React integriert ist. 44 00:03:29,810 --> 00:03:36,980 Dies kann auch für einige Status- und Datenverwaltungen hinter den Kulissen verwendet werden, ist jedoch kein guter Ersatz für 45 00:03:36,980 --> 00:03:39,710 alle Anwendungsfälle, in denen Sie Redux verwenden. 46 00:03:39,710 --> 00:03:45,160 Ich werde hier nicht näher darauf eingehen, da dies nicht wirklich ein Kurs über die Vor- und Nachteile verschiedener React-Konstrukte 47 00:03:45,170 --> 00:03:50,930 ist. Stattdessen möchten wir hier React Native lernen, aber im Anhang finden Sie einige Ressourcen, die Ihnen bei diesem Vergleich helfen 48 00:03:50,930 --> 00:03:58,030 zwischen React Context API und Redux und wann welche verwendet werden sollen. In diesem Modul verwenden wir Redux, das sehr flexibel ist und 49 00:03:58,050 --> 00:04:02,490 das wir definitiv verwenden können, und ich werde Ihnen zeigen, wie Sie es mit React 50 00:04:02,490 --> 00:04:05,870 Native einrichten und wie Sie dann natürlich damit arbeiten können.