1 00:00:02,250 --> 00:00:08,070 Wir werden weiter an der App arbeiten, die wir im letzten Kursmodul mit unseren Rezepten hier 2 00:00:08,070 --> 00:00:15,070 und mit den Filtern, die wir einstellen könnten, usw. erstellt haben. Außerdem müssen wir zwei Dinge hinzufügen, wo wir Redux benötigen. 3 00:00:15,090 --> 00:00:21,870 Eine ist, dass wir ein Rezept tatsächlich als Favorit markieren können, indem wir auf dieses Sternsymbol klicken, dass dies tatsächlich als Favorit markiert wird 4 00:00:21,870 --> 00:00:27,900 und dass wir dieses Symbol auch ändern, um zu zeigen, ob dies bereits ein Favorit ist oder nicht, aber was noch wichtiger 5 00:00:27,900 --> 00:00:28,980 ist: dass wir 6 00:00:28,980 --> 00:00:35,400 dieses Rezept hier auf der Registerkarte Favoriten als Favorit sehen können. Und die andere Sache, bei der wir Redux benötigen, 7 00:00:35,400 --> 00:00:41,280 ist hier in den Filtern. Wenn wir einen Filter einstellen und diesen dann speichern, sollte dies 8 00:00:41,280 --> 00:00:49,080 natürlich Auswirkungen auf die Mahlzeiten haben, die wir hier auf unserer Registerkarte Mahlzeiten in der Liste von laden Mahlzeiten, wenn wir eine 9 00:00:49,080 --> 00:00:51,470 Kategorie auswählen. Dort sollte 10 00:00:51,500 --> 00:00:58,880 sich dies widerspiegeln, was wir auf den Filtern eingestellt haben. Daran arbeiten wir, woran wir Redux brauchen, und 11 00:00:58,880 --> 00:01:02,300 dafür installieren wir Redux und legen los. 12 00:01:03,350 --> 00:01:07,760 Um mit Redux zu beginnen, beende ich meinen Expo-Server hier, 13 00:01:07,760 --> 00:01:12,830 den npm-Startvorgang, beende ihn vorübergehend und installiere ein Paket. Das wäre 14 00:01:12,860 --> 00:01:15,030 Redux. Zusätzlich zu Redux müssen 15 00:01:15,110 --> 00:01:22,460 wir auch React Redux installieren, da dies der Fall ist auch erforderlich, um dann mit Redux 16 00:01:22,460 --> 00:01:23,760 zu arbeiten. 17 00:01:23,780 --> 00:01:28,700 Daher müssen beide Pakete hier installiert werden, und während der Installation können wir dort bereits ein 18 00:01:28,700 --> 00:01:34,280 wenig an unseren Codedateien arbeiten, da ich in diesem Projekt jetzt einen neuen Ordner hinzufügen möchte und es sich 19 00:01:34,280 --> 00:01:35,780 um den Speicherordner handelt. 20 00:01:35,780 --> 00:01:40,810 Jetzt können Sie diesen Ordner beliebig benennen. Er muss nicht als Speicher bezeichnet werden. Redux ist 21 00:01:41,000 --> 00:01:46,970 das egal, aber dies ist der Ordner, in dem ich mein Redux-Setup verwalten möchte, da es bei Redux nur um 22 00:01:46,970 --> 00:01:48,390 diesen zentralen Statusspeicher geht. 23 00:01:48,530 --> 00:01:56,150 Hier in diesem Store-Ordner können wir jetzt mit Redux beginnen und ich werde Redux hier nicht im Detail behandeln. Ich habe einen 24 00:01:56,150 --> 00:01:57,230 vollständigen React and 25 00:01:57,260 --> 00:02:02,510 Redux-Kurs dafür, wenn Sie die Vor- und Nachteile davon lernen möchten, z In diesem Kurs 26 00:02:02,570 --> 00:02:08,450 gehe ich von vorherigen React- und Redux-Kenntnissen aus und daher wird dies nur eine kurze Auffrischung sein. 27 00:02:09,890 --> 00:02:14,980 Am Ende dreht sich bei Redux alles um Reduzierungen, Aktionen und den Aufbau eines Geschäfts basierend auf diesen 28 00:02:14,980 --> 00:02:16,010 Reduzierungen und Aktionen. 29 00:02:16,360 --> 00:02:23,230 Dazu füge ich hier in diesem Speicherordner einen Aktionsordner und einen Reduzierungsordner hinzu. Eigentlich haben wir in diesem Projekt nur eine 30 00:02:23,320 --> 00:02:29,320 Aktions- und eine Reduzierungsdatei, aber wenn Sie mehr Dateien als diese hatten, haben Sie Separate Unterordner könnten eine 31 00:02:29,320 --> 00:02:34,180 gute Idee sein, um sie organisiert zu halten, und deshalb erstelle ich sie hier, 32 00:02:34,180 --> 00:02:39,820 obwohl wir das für diese einfache App nicht brauchen würden, weil wir nicht so viele Dateien haben. 33 00:02:39,880 --> 00:02:44,230 Beginnen wir mit dem Reduzierer. Im Reduziererordner 34 00:02:44,350 --> 00:02:52,630 hier füge ich meine Mahlzeiten hinzu. js-Datei und das ist die Datei, in der ich die Aktualisierungslogik für den Status des Essensreduzierers 35 00:02:52,630 --> 00:02:53,310 verwaltet habe. 36 00:02:53,410 --> 00:02:58,750 Das ist also am Ende die Datei, in der wir die Logik zum Markieren einer Mahlzeit als 37 00:02:58,750 --> 00:03:01,330 Favorit und zum Verwalten unserer Filter schreiben. 38 00:03:01,430 --> 00:03:04,700 Jetzt ist ein Reduzierer in React nur eine Funktion. Hier 39 00:03:04,700 --> 00:03:10,550 werde ich eine Funktion erstellen, sie als Reduzierer für Mahlzeiten bezeichnen, der Name liegt ganz bei Ihnen und 40 00:03:10,610 --> 00:03:17,360 diese Funktion erhält tatsächlich zwei Argumente - den Status, den aktuellen Status-Snapshot, auf dem Sie aufbauen können einen neuen Zustand ableiten, 41 00:03:17,360 --> 00:03:22,250 da ein Reduzierer am Ende einen neuen Zustand zurückgeben muss, der dann von Redux übernommen 42 00:03:22,370 --> 00:03:24,860 und in seinem Speicher gespeichert wird. 43 00:03:24,860 --> 00:03:30,230 Sie erhalten hier also den aktuellen, den alten Status und die Aktion, da die Reduzierungsfunktion hier von 44 00:03:30,230 --> 00:03:31,940 Redux ausgeführt wird, wenn 45 00:03:31,940 --> 00:03:36,710 eine neue Aktion ausgelöst wird. Daher erhalten wir hier Zugriff auf die Aktion, damit wir 46 00:03:36,710 --> 00:03:40,370 herausfinden können, ob wir handeln müssen und was wir tun müssen. 47 00:03:40,520 --> 00:03:44,960 Innerhalb dieser Funktion müssen Sie am Ende einen neuen Zustand zurückgeben. In seiner einfachsten Form 48 00:03:44,960 --> 00:03:49,220 bedeutet dies natürlich, dass wir den aktuellen Zustand zurückgeben, was andererseits bedeutet, dass dieser Reduzierer 49 00:03:49,220 --> 00:03:52,470 nichts Nützliches tut, aber wir werden es tun ändere das. 50 00:03:52,650 --> 00:03:58,170 Wenn wir unsere App zum ersten Mal ausführen, möchten wir auch einen Anfangszustand einrichten, der 51 00:03:58,170 --> 00:04:00,000 anfänglich verwendet wird. Dadurch 52 00:04:00,000 --> 00:04:06,510 wird unser Zustand beim Start dieser App initialisiert. Dazu füge ich hier eine neue Anfangszustandskonstante hinzu, die ein 53 00:04:06,510 --> 00:04:14,970 einfaches Javascript enthält Objekt und dort möchte ich eine Liste meiner Mahlzeiten und dann auch eine Liste meiner gefilterten Mahlzeiten speichern, da wir 54 00:04:15,120 --> 00:04:22,060 beide benötigen - eine Liste aller Mahlzeiten und eine Liste der Mahlzeiten, die zu den Filtern passen, die der 55 00:04:22,060 --> 00:04:31,130 Benutzer und ich festgelegt haben Ich möchte auch meine Lieblingsgerichte hier haben. Also drei Arten von Essensarrays, die ich am Ende speichere, und das ist 56 00:04:31,130 --> 00:04:31,610 natürlich 57 00:04:31,670 --> 00:04:34,800 nur ein möglicher Ansatz, den Sie hier verfolgen 58 00:04:34,830 --> 00:04:40,340 können. Wir können hier sicherlich andere Möglichkeiten finden, unsere Daten zu verwalten, aber ich mag diesen. 59 00:04:40,590 --> 00:04:53,140 Was ich jetzt in dieser Datei brauche, sind meine Dummy-Daten für Mahlzeiten, also importiere ich Mahlzeiten aus meinem Datenordner 60 00:04:53,140 --> 00:04:59,860 und dort aus den Dummy-Daten. js file und ich initialisiere die Mahlzeiten hier mit meinem Dummy-Datenarray für Mahlzeiten. 61 00:05:00,550 --> 00:05:06,220 Damit werden auch gefilterte Mahlzeiten initialisiert, da zu Beginn dieser App 62 00:05:06,330 --> 00:05:11,840 keine Filter eingerichtet sind. Lieblingsgerichte hingegen sind anfangs leer, da wir beim Start der 63 00:05:11,840 --> 00:05:13,130 App keine Lieblingsgerichte haben. 64 00:05:13,130 --> 00:05:18,230 Natürlich möchten Sie in einer echten App diesen Status möglicherweise auf einem Server speichern, damit Sie nicht wieder von 65 00:05:18,230 --> 00:05:21,400 vorne anfangen, wenn der Benutzer die App schließt und später wiederkommt, 66 00:05:21,470 --> 00:05:23,230 aber das tun wir hier nicht 67 00:05:23,240 --> 00:05:28,580 Im weiteren Verlauf dieses Kurses erfahren Sie, wie Sie sich an einen Server wenden, dort Daten speichern und Daten von 68 00:05:28,610 --> 00:05:29,440 dort in 69 00:05:29,460 --> 00:05:33,040 separaten Modulen laden. Hier wird es einfach sein, sich auf Redux zu konzentrieren. 70 00:05:33,140 --> 00:05:39,170 Dies ist also mein Anfangszustand. Hier in dieser Funktion können wir jetzt eine Javascript-Syntax verwenden, bei 71 00:05:39,230 --> 00:05:44,690 der wir unseren Anfangszustand als Standardwert für das Zustandsargument zuweisen. Dies bedeutet, dass wenn diese 72 00:05:44,690 --> 00:05:51,290 Reduzierungsfunktion ausgeführt wird und der Zustand undefiniert ist, was der Fall ist, wenn Redux führt unseren Reduzierer zum 73 00:05:51,590 --> 00:05:53,700 ersten Mal aus. Wir 74 00:05:53,750 --> 00:05:56,330 beginnen mit diesem Anfangszustand, sodass dann automatisch 75 00:05:56,330 --> 00:06:02,760 unser Anfangszustand geladen wird, so dass beim Starten und Starten von Redux eine erste Aktion ausgelöst wird 76 00:06:02,790 --> 00:06:07,910 Wird verwendet, um den Reduzierer einmal zu durchlaufen, und dann wird unser Ausgangszustand geladen. 77 00:06:07,980 --> 00:06:14,160 Damit können wir mit einem Anfangszustand arbeiten, der nett ist, der uns allein aber nicht allzu 78 00:06:14,160 --> 00:06:16,190 viel hilft. Im Moment verbinden 79 00:06:16,200 --> 00:06:17,070 wir diesen 80 00:06:17,250 --> 00:06:23,640 Reduzierer jetzt mit Redux, sodass wir unseren Redux-Store tatsächlich überall in der App verwenden können, bevor wir dann mit dem 81 00:06:23,640 --> 00:06:30,860 Versenden von Aktionen beginnen und weitere nützliche Dinge im Reduzierer erledigen. Daher werde ich hier vorerst nur den 82 00:06:30,860 --> 00:06:39,890 Essensreduzierer als Standard hier und jetzt in der App exportieren. js ist die Datei, in der unsere 83 00:06:39,890 --> 00:06:42,190 gesamte App startet. 84 00:06:42,230 --> 00:06:47,960 Wir müssen unseren Redux-Store einrichten. Dafür 85 00:06:48,080 --> 00:06:57,270 importieren wir hier create store aus Redux. 86 00:06:57,510 --> 00:07:02,010 Außerdem müssen wir von dort Mähdrescherreduzierer importieren. 87 00:07:02,010 --> 00:07:06,090 Auf diese Weise können wir jetzt ein Geschäft erstellen. Wir benötigen 88 00:07:06,090 --> 00:07:12,610 lediglich unseren Reduzierer. Hier importiere ich meinen Essensreduzierer aus und zeige jetzt auf den Ladenordner, den Reduziererordner und dort 89 00:07:12,610 --> 00:07:15,280 auf die Mahlzeiten. js Datei und 90 00:07:15,330 --> 00:07:26,520 jetzt vielleicht hier können wir unseren Shop hier erstellen, indem wir create store aufrufen. Jetzt erstellt create store am Ende einen Reduzierer, den 91 00:07:26,640 --> 00:07:31,910 Sie übergeben müssen. Jetzt haben wir hier natürlich einen Reduzierer, 92 00:07:31,920 --> 00:07:36,780 und wir könnten dies weitergeben, aber in größeren Apps haben Sie möglicherweise mehr als einen 93 00:07:36,780 --> 00:07:43,710 Reduzierer, da Sie häufig Reduzierer für die verschiedenen Funktionsbereiche Ihrer App haben, einen für die Authentifizierung, einen für Ihre Produkte. Nehmen 94 00:07:43,710 --> 00:07:49,740 wir zum Beispiel den Support-Bereich Ihrer App an, und Sie müssen all diese einzelnen Reduzierungen, diese verschiedenen Reduzierungen, zu 95 00:07:49,800 --> 00:07:53,970 einem Root-Reduzierer zusammenführen. Genau das tun die kombinierten Reduziererfunktionen. Auch hier würden wir 96 00:07:54,000 --> 00:07:58,800 sie nicht benötigen, da wir nur einen Reduzierer haben Aber um Ihnen bereits den Ansatz 97 00:07:58,800 --> 00:08:01,060 zu zeigen, den Sie auch mit 98 00:08:01,140 --> 00:08:07,890 mehreren Reduzierern verwenden können, werde ich ihn auch hier verwenden. Also werde ich hier meinen Root-Reduzierer haben, den ich 99 00:08:07,890 --> 00:08:14,460 durch Aufrufen von kombinierten Reduzierern erstelle. Kombinierte Reduzierer nehmen ein Javascript-Objekt, in dem wir jetzt unsere einzelnen Reduzierer, unsere 100 00:08:14,460 --> 00:08:16,130 verschiedenen Reduzierer, Schlüsseln zuordnen. 101 00:08:16,130 --> 00:08:21,870 Zum Beispiel könnten wir hier Mahlzeiten als Schlüssel nehmen, aber dieser Name liegt ganz bei Ihnen und verbinden dies 102 00:08:22,740 --> 00:08:24,900 wie folgt mit dem Reduzierer für Mahlzeiten. 103 00:08:24,900 --> 00:08:32,760 Dies führt letztendlich dazu, dass dieser Mahlzeitreduzierer mit diesem Wurzelreduzierer zusammengeführt wird, und wir werden später in der Lage sein, 104 00:08:32,760 --> 00:08:37,380 mit Hilfe dieser Mahlzeiten mit dem vom Mahlzeitreduzierer verwalteten Zustand zu 105 00:08:37,380 --> 00:08:43,440 arbeiten, also mit diesem Zustand, der so initialisiert wird Eigenschaft, wir können später auf diesen Status 106 00:08:43,440 --> 00:08:44,900 zugreifen, auf diesen 107 00:08:44,910 --> 00:08:49,630 Teil des Status mit dieser Eigenschaft, aber Sie werden all das sehen. 108 00:08:49,740 --> 00:08:54,780 Das ist also unser Root-Reduzierer, und jetzt müssen wir nur noch den Root-Reduzierer übergeben, um ein Geschäft 109 00:08:54,780 --> 00:08:57,900 zu erstellen. Dies gibt uns ein Geschäft und was nun? 110 00:08:57,900 --> 00:09:03,210 Jetzt muss dieser Speicher für unsere Anwendung bereitgestellt werden, und dafür benötigen wir das 111 00:09:03,240 --> 00:09:06,960 andere Paket, das wir installiert haben, nämlich React Redux. 112 00:09:07,170 --> 00:09:18,300 Von dort können wir die Provider-Komponente importieren, Provider wie diesen. Am Ende wickeln wir den Anbieter am Ende um unsere Root-App-Komponente, also um 113 00:09:18,390 --> 00:09:25,200 die oberste Komponente, die alle anderen Komponenten enthält, die eventuell mit unserem Geschäft interagieren, und der 114 00:09:25,200 --> 00:09:30,000 Essensnavigator ist dafür ziemlich gut geeignet, da er alle unsere 115 00:09:30,060 --> 00:09:36,420 Bildschirme enthält, also alle Komponenten, die wir eventuell benötigen, um Aktionen auszulösen oder auf unseren 116 00:09:36,480 --> 00:09:44,230 Status zuzugreifen, lesen Sie also aus unserem Status. Daher wickeln wir hier die Anbieterkomponente um den Essensnavigator und 117 00:09:44,230 --> 00:09:50,440 jetzt nimmt der Anbieter eine wichtige Eigenschaft, eine Requisite, die Sie übergeben müssen, und das ist die Requisite 118 00:09:50,680 --> 00:09:54,590 des Geschäfts, und natürlich geben wir dort unseren Wert als Wert an. 119 00:09:54,640 --> 00:10:01,660 Dieser konstante Speicher, in dem sich der erstellte Speicher befindet, wird an den Anbieter der Store-Requisiten übergeben. Hinter den Kulissen erhalten 120 00:10:01,660 --> 00:10:07,990 wir alles, was wir für die Interaktion mit Redux benötigen. Der Redux-Store befindet sich in einer beliebigen Komponente, einem 121 00:10:08,050 --> 00:10:11,520 beliebigen Bildschirm oder einer anderen Komponente in unserer Anwendung . 122 00:10:13,360 --> 00:10:18,630 Lassen Sie mich dies jetzt mit npm start neu starten und im Moment wird dies keinen großen 123 00:10:18,630 --> 00:10:21,430 Unterschied machen, aber unsere App sollte auf jeden 124 00:10:21,430 --> 00:10:29,140 Fall noch funktionieren, so dass sie aus diesem Grund nicht abstürzen sollte. Lassen Sie uns also einfach überprüfen, ob dies der Fall ist, und lassen 125 00:10:29,170 --> 00:10:38,370 Sie uns Hier neu laden, wir drücken r zweimal auf Android und befehlen r auf iOS und lassen uns sehen, wo das noch geladen wird, ja, das sieht hier auf 126 00:10:38,730 --> 00:10:44,860 iOS gut aus und ich bin ziemlich sicher, dass es auch auf Android gut geladen wird. Ja, das funktioniert auch. 127 00:10:44,890 --> 00:10:46,890 Jetzt ist Redux eingerichtet, unser 128 00:10:46,900 --> 00:10:49,990 Shop ist initialisiert, aber wir verwenden es nicht. 129 00:10:49,990 --> 00:10:54,520 Lassen Sie uns als nächsten Schritt sicherstellen, dass wir unseren Laden nutzen, bevor wir uns dann um Aktionen kümmern 130 00:10:54,520 --> 00:10:56,200 und echte Arbeit im Reduzierer leisten.