1 00:00:02,360 --> 00:00:04,430 Wie können wir unseren Shop nutzen? 2 00:00:04,430 --> 00:00:11,240 Denken Sie daran, dass ich am Ende hier meine Mahlzeiten verwalte, nicht meine Kategorien, weil wir keine Maßnahmen geplant haben, 3 00:00:11,240 --> 00:00:13,490 die dort etwas ändern würden, aber ich 4 00:00:13,670 --> 00:00:15,530 verwalte meine Mahlzeiten hier. 5 00:00:15,650 --> 00:00:22,990 Eine großartige Aufgabe wäre es also, überall in unserer App zu hingehen, wo wir Mahlzeiten aus den Dummy-Daten importieren und diesen Import loswerden 6 00:00:23,110 --> 00:00:26,970 und stattdessen die Daten aus unserem Geschäft entfernen, da der Unterschied darin 7 00:00:26,980 --> 00:00:32,650 besteht, dass wir später Logik hinzufügen können, um Änderungen vorzunehmen die Daten in unserem Shop, während sich unsere 8 00:00:32,650 --> 00:00:34,170 Dummy-Daten nie ändern werden. 9 00:00:34,180 --> 00:00:38,980 Daher sollten wir Daten aus unserem Geschäft importieren, damit wir anschließend Logik hinzufügen können, um 10 00:00:39,280 --> 00:00:42,970 diese Daten zu bearbeiten, beispielsweise um die angezeigten Mahlzeiten einzuschränken. 11 00:00:42,980 --> 00:00:47,510 Wo brauchen wir dann die Mahlzeiten? Auf dem Kategorienbildschirm 12 00:00:47,510 --> 00:00:52,130 importieren wir keine Mahlzeiten. Wir haben ein paar andere Importe, die wir tatsächlich loswerden können, aber das 13 00:00:52,130 --> 00:00:52,490 ist 14 00:00:52,550 --> 00:00:53,840 nur eine Randnotiz, wir importieren keine Mahlzeiten. 15 00:00:53,870 --> 00:00:58,340 Kategorien können dort bleiben, da wir wiederum keine Logik haben, 16 00:00:58,490 --> 00:01:05,690 die dies ändert, sodass wir weitermachen können. Der Bildschirm für die Kategorie Mahlzeiten ist eine andere Geschichte. Dort importieren wir Mahlzeiten. 17 00:01:05,690 --> 00:01:09,530 Jetzt besteht das Ziel darin, diesen Import zu beseitigen und die Mahlzeiten aus dem Redux-Laden zu 18 00:01:09,530 --> 00:01:16,640 holen. Die Frage ist natürlich, wie machen wir das? Auch hier hilft uns das React Redux-Paket. Aus diesem React 19 00:01:16,730 --> 00:01:25,010 Redux-Paket können wir etwas importieren, wir können einen Hook importieren, den Use Selector Hook. 20 00:01:25,020 --> 00:01:32,210 Auf diese Weise können wir einen Teil unseres Status, unseres global verwalteten Status, auswählen und in dieser Komponente verwenden. 21 00:01:32,220 --> 00:01:36,660 Jetzt verwende ich hier den Hook, da dies uns die Verwendung in einer Funktionskomponente ermöglicht. 22 00:01:36,660 --> 00:01:42,480 Möglicherweise kennen Sie auch einen anderen Ansatz, bei dem Sie die Verbindungsfunktion tatsächlich importieren und Ihren Export damit abschließen 23 00:01:42,480 --> 00:01:47,220 und den Kartenstatus für Requisiten und Kartenversand verwenden für Requisiten, das ist etwas, das Sie auch 24 00:01:47,220 --> 00:01:49,010 verwenden können, es wird absolut 25 00:01:49,020 --> 00:01:51,560 funktionieren, aber das ist ein bisschen schlanker, also 26 00:01:51,580 --> 00:01:56,140 werde ich hier mit dem Verwendungswähler gehen. Wenn wir unsere Mahlzeiten 27 00:01:56,260 --> 00:01:59,510 jetzt verwenden, verwenden wir sie nicht mehr 28 00:01:59,710 --> 00:02:07,270 so, sondern können sie jetzt mithilfe des Verwendungswählers erhalten. Um unsere Display-Mahlzeiten abzuleiten, werde ich hier eine 29 00:02:07,270 --> 00:02:15,400 neue Konstante erstellen, möglicherweise verfügbare Mahlzeiten. Der Name liegt bei Ihnen und ich verwende hier den Selektor wie folgt, da dadurch Daten 30 00:02:15,400 --> 00:02:19,920 aus dem Status abgerufen und zurückgegeben werden Das ist es, was ich 31 00:02:19,930 --> 00:02:25,450 dann hier in dieser Konstante speichern werde. Der zurückgegebene Wert- und Verwendungsselektor übernimmt eine Funktion, 32 00:02:26,110 --> 00:02:29,920 eine Funktion, die von React Redux für uns ausgeführt wird. 33 00:02:29,920 --> 00:02:36,430 Eine Funktion, die den Status automatisch als Argument erhält, React Redux, die die Funktion für uns ausführt, stellt 34 00:02:36,430 --> 00:02:44,140 dieser Funktion den aktuellen Status und den aktuellen Redux-Status zur Verfügung und kann dann alle gewünschten Daten aus diesem Status von 35 00:02:44,200 --> 00:02:48,810 diesem globalen Status zurückgeben speichern, aus dem globalen Staat und ich verwende 36 00:02:48,850 --> 00:02:50,640 diese Begriffe hier austauschbar. 37 00:02:52,910 --> 00:02:56,380 Wie können wir dann Daten aus diesem Zustand hier im Funktionskörper abrufen 38 00:02:56,420 --> 00:03:01,370 und ich verwende hier die Shortcut-Pfeilnotation, wo auf der rechten Seite des Pfeils diese automatisch zurückgegeben wird, 39 00:03:01,370 --> 00:03:06,860 wenn sie nicht in geschweifte Klammern eingeschlossen ist. Nun, um Zugang zu etwas vom Staat zu bekommen, 40 00:03:06,860 --> 00:03:12,560 müssen wir zu dem Ort zurückkehren, an dem wir den Laden erstellen. Dort übergebe ich einen Root-Reduzierer, der durch 41 00:03:12,560 --> 00:03:14,120 Kombinieren aller Reduzierungen erstellt wird. 42 00:03:14,150 --> 00:03:17,250 Wieder haben wir nur einen, aber ich erklärte, warum ich das getan habe. 43 00:03:17,300 --> 00:03:20,980 Jetzt haben wir diesen Schlüssel, Mahlzeiten, die ganz bei Ihnen liegen. Sie können diesen 44 00:03:20,990 --> 00:03:22,640 Namen so nennen, wie Sie möchten. 45 00:03:22,640 --> 00:03:29,030 Dies gibt diesem Teil unseres Zustands, der von diesem Reduzierer verwaltet wird, eine Kennung, und 46 00:03:29,030 --> 00:03:32,950 wir können diese Kennung jetzt verwenden, um den 47 00:03:33,020 --> 00:03:37,820 Teil unseres Zustands zu erfassen, für den dieser Reduzierer verantwortlich ist. 48 00:03:37,820 --> 00:03:45,070 Also am Ende ein Zustand, der so aussehen wird, wie dieser Anfangszustand. Also in der Kategorie Mahlzeit Bildschirm, 49 00:03:45,070 --> 00:03:51,210 hier greife ich auf Status. Mahlzeiten oder was auch immer Sie als Kennung in kombinierten 50 00:03:51,310 --> 00:03:58,490 Reduzierern gewählt haben und dann werde ich hier auf gefilterte Mahlzeiten zugreifen. Keine Mahlzeiten, die ich auch dort haben würde, wir 51 00:03:58,540 --> 00:04:03,380 haben auch Mahlzeiten hier, aber ich möchte alle Filter respektieren, die eingestellt sind. 52 00:04:03,450 --> 00:04:06,690 Im Moment haben wir keine Logik, um sie festzulegen, 53 00:04:06,760 --> 00:04:12,970 aber damit werden wir uns in Zukunft ändern. Deshalb möchte ich hier meine gefilterten Mahlzeiten erhalten, damit ich immer 54 00:04:12,970 --> 00:04:17,930 die Mahlzeiten bekomme, die ich wirklich anzeigen sollte, die Mahlzeiten, die dies respektieren Die vom 55 00:04:18,130 --> 00:04:25,420 Benutzer eingerichteten Filter und jetzt die verfügbaren Mahlzeiten, die ich hier noch mehr filtern möchte, um die Mahlzeit für die von mir 56 00:04:25,420 --> 00:04:33,880 ausgewählte Kategorie-ID oder die Mahlzeiten für die von mir ausgewählte Kategorie zu finden. Damit gibt es in dieser Datei keine Großbuchstaben mehr 57 00:04:33,890 --> 00:04:39,500 für Mahlzeiten, das ist alles nur Kleinbuchstaben, und wir haben diesen Import 58 00:04:39,500 --> 00:04:45,890 erfolgreich beseitigt. Jetzt gehen wir weiter. Auf dem Lieblingsbildschirm importieren wir auch Mahlzeiten 59 00:04:45,890 --> 00:04:46,650 und 60 00:04:46,670 --> 00:04:54,770 wie zuvor sollten wir das loswerden, also machen wir das. Stattdessen verwende ich auch nach wie vor den Selector von React 61 00:04:54,770 --> 00:05:02,720 Redux, um meine Mahlzeiten aus dem Laden zu holen. Daher erhalte ich hier, wo ich Mahlzeiten verwende, meine verfügbaren Mahlzeiten mit 62 00:05:02,720 --> 00:05:04,260 dem Use Selector. 63 00:05:04,310 --> 00:05:10,370 Dies gibt mir wieder einen Status und ich kann auf den Status zugreifen. Mahlzeiten. gefilterte Mahlzeiten, aber jetzt eigentlich 64 00:05:10,370 --> 00:05:11,240 hier für 65 00:05:11,240 --> 00:05:16,250 die Favoriten, möchte ich keine Filter respektieren, die gesetzt wurden, weil es meiner Meinung 66 00:05:16,250 --> 00:05:21,000 nach sinnvoll ist, wenn wir unsere Favoriten anzeigen wollen, immer alle Favoriten zu sehen. 67 00:05:21,050 --> 00:05:25,930 Sie könnten natürlich eine andere Logik haben und sich für die gefilterten Mahlzeiten entscheiden, aber ich werde hier nur 68 00:05:26,090 --> 00:05:28,490 Mahlzeiten verwenden, also. Mahlzeiten. Mahlzeiten 69 00:05:28,520 --> 00:05:36,950 mögen seltsam aussehen, dies wählt die Scheibe unseres Staates aus und in dieser Scheibe greift diese Mahlzeit hier auf diese Mahlzeit-Eigenschaft in 70 00:05:36,950 --> 00:05:37,940 unserer Staatsscheibe zu, 71 00:05:40,820 --> 00:05:46,180 aber wenn Sie sich Ihren Reduzierer ansehen, ist dies natürlich nur teilweise sinnvoll, 72 00:05:46,180 --> 00:05:51,050 weil wir Ich habe hier ein Lieblingsessen und das tun wir auch. 73 00:05:51,330 --> 00:05:58,260 Eigentlich müssen wir unsere Favoriten nicht mehr so filtern und dies war sowieso nur ein Dummy-Filter. Es wurden 74 00:05:58,260 --> 00:06:04,710 immer die Mahlzeiten mit m1 und m2 als ID verwendet. Stattdessen können wir sie für unsere 75 00:06:04,760 --> 00:06:10,310 Lieblingsgerichte einfach durch Zugriff erhalten Hier auf unseren Mahlzeiten geben Sie Slice-Lieblingsgerichte an, daher 76 00:06:10,310 --> 00:06:16,880 diese Eigenschaft, da wir die bevorzugten Mahlzeiten später in einem separaten Array in unserem Geschäft verwalten werden. 77 00:06:16,880 --> 00:06:18,280 Das ist hier 78 00:06:18,290 --> 00:06:23,290 also noch einfacher, sehr kurzer Code. Damit haben wir auch hier den Import von 79 00:06:23,300 --> 00:06:25,460 Mahlzeiten beseitigt. Gehen wir zum Filterbildschirm. 80 00:06:25,460 --> 00:06:27,080 Hier wird kein Essen importiert, 81 00:06:27,170 --> 00:06:29,840 auf dem Bildschirm mit den Essensdetails wird hingegen eines angezeigt. 82 00:06:29,840 --> 00:06:31,280 Also hier möchte ich 83 00:06:31,310 --> 00:06:33,220 es loswerden und jetzt brauchen 84 00:06:33,290 --> 00:06:39,800 wir hier die andere Mahlzeit-Eigenschaft, die ich vor einer Sekunde gezeigt habe, weil wir auch hier den Selektor von 85 00:06:40,610 --> 00:06:51,720 React Redux verwenden können, um unsere Mahlzeiten auszuwählen, weil wir hier jetzt unsere haben Komponente hier, wo wir unsere Mahlzeiten verwenden, und dort möchte ich ein Array mit allen Mahlzeiten haben, 86 00:06:51,810 --> 00:06:59,280 weil ich versuche, eine einzelne Mahlzeit nach ID zu laden, und daher sollte meine Basis, mein Array, in dem ich nach 87 00:06:59,370 --> 00:07:04,440 dieser ID suche, natürlich eine sein Array mit allen Mahlzeiten und nicht gefiltert, da 88 00:07:04,440 --> 00:07:09,900 mir keine festgelegten Filter wichtig sind. Hier suche ich nach einer bestimmten Mahlzeit mit einer 89 00:07:09,900 --> 00:07:16,140 bestimmten ID und möchte eine vollständige Liste der Mahlzeiten erhalten. Daher benötigen wir diese ungefiltert Essensliste, die wir 90 00:07:16,140 --> 00:07:17,180 hier verwalten. 91 00:07:20,140 --> 00:07:27,880 Daher können wir hier jetzt unsere verfügbaren Mahlzeiten mit dem Verwendungswähler erhalten und dort verwenden 92 00:07:27,880 --> 00:07:34,360 wir wieder die staatlichen Mahlzeiten. Mahlzeiten jetzt wirklich und jetzt können wir verfügbare Mahlzeiten 93 00:07:34,420 --> 00:07:41,070 hier verwenden, um die Mahlzeit mit dieser ID zu finden. Damit werden wir diesen Import auch hier los. Wir können den Button-Import jetzt auch 94 00:07:41,070 --> 00:07:44,090 entfernen, da ich ihn sehe, aber wir werden tatsächlich ein Problem haben. 95 00:07:44,430 --> 00:07:51,780 Möglicherweise stellen Sie fest, dass ich in der Kopfzeile auch versuche, eine Mahlzeit aus dem Menü "Mahlzeiten" zu finden, 96 00:07:51,780 --> 00:07:53,770 und wir entfernen diesen Import. 97 00:07:53,790 --> 00:07:59,010 Jetzt liegt das Problem auch hier in den Navigationsoptionen. Wir können den Use Selector Hook nicht verwenden, 98 00:07:59,010 --> 00:08:04,170 da Sie Hooks nur innerhalb anderer Hooks oder innerhalb von Funktionskomponenten verwenden können. Dies ist keines davon, 99 00:08:04,170 --> 00:08:08,340 es ist eine normale Funktion, keine Funktion Komponente und auch kein Haken. 100 00:08:08,340 --> 00:08:11,870 Daher können wir hier keinen Verwendungsselektor verwenden, damit dies nicht funktioniert. 101 00:08:11,900 --> 00:08:17,400 Jetzt könnten wir natürlich den Import von Mahlzeiten zurückbringen, aber das wäre ziemlich billig, da Sie in realen Anwendungen manchmal 102 00:08:17,400 --> 00:08:22,710 die Situation haben, in der Sie Daten aus Ihrem Redux-Speicher in Ihren Navigationsdaten benötigen, und daher werden wir dies in 103 00:08:22,710 --> 00:08:23,160 der 104 00:08:23,190 --> 00:08:28,470 nächsten Vorlesung tun Nehmen Sie dies in Angriff und stellen Sie sicher, dass wir auch hier darauf zugreifen können.