Wie können wir unseren Shop nutzen?
Denken Sie daran, dass ich am Ende hier meine Mahlzeiten verwalte, nicht meine Kategorien, weil wir keine Maßnahmen geplant haben,
die dort etwas ändern würden, aber ich
verwalte meine Mahlzeiten hier.
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
und stattdessen die Daten aus unserem Geschäft entfernen, da der Unterschied darin
besteht, dass wir später Logik hinzufügen können, um Änderungen vorzunehmen die Daten in unserem Shop, während sich unsere
Dummy-Daten nie ändern werden.
Daher sollten wir Daten aus unserem Geschäft importieren, damit wir anschließend Logik hinzufügen können, um
diese Daten zu bearbeiten, beispielsweise um die angezeigten Mahlzeiten einzuschränken.
Wo brauchen wir dann die Mahlzeiten? Auf dem Kategorienbildschirm
importieren wir keine Mahlzeiten. Wir haben ein paar andere Importe, die wir tatsächlich loswerden können, aber das
ist
nur eine Randnotiz, wir importieren keine Mahlzeiten.
Kategorien können dort bleiben, da wir wiederum keine Logik haben,
die dies ändert, sodass wir weitermachen können. Der Bildschirm für die Kategorie Mahlzeiten ist eine andere Geschichte. Dort importieren wir Mahlzeiten.
Jetzt besteht das Ziel darin, diesen Import zu beseitigen und die Mahlzeiten aus dem Redux-Laden zu
holen. Die Frage ist natürlich, wie machen wir das? Auch hier hilft uns das React Redux-Paket. Aus diesem React
Redux-Paket können wir etwas importieren, wir können einen Hook importieren, den Use Selector Hook.
Auf diese Weise können wir einen Teil unseres Status, unseres global verwalteten Status, auswählen und in dieser Komponente verwenden.
Jetzt verwende ich hier den Hook, da dies uns die Verwendung in einer Funktionskomponente ermöglicht.
Möglicherweise kennen Sie auch einen anderen Ansatz, bei dem Sie die Verbindungsfunktion tatsächlich importieren und Ihren Export damit abschließen
und den Kartenstatus für Requisiten und Kartenversand verwenden für Requisiten, das ist etwas, das Sie auch
verwenden können, es wird absolut
funktionieren, aber das ist ein bisschen schlanker, also
werde ich hier mit dem Verwendungswähler gehen. Wenn wir unsere Mahlzeiten
jetzt verwenden, verwenden wir sie nicht mehr
so, sondern können sie jetzt mithilfe des Verwendungswählers erhalten. Um unsere Display-Mahlzeiten abzuleiten, werde ich hier eine
neue Konstante erstellen, möglicherweise verfügbare Mahlzeiten. Der Name liegt bei Ihnen und ich verwende hier den Selektor wie folgt, da dadurch Daten
aus dem Status abgerufen und zurückgegeben werden Das ist es, was ich
dann hier in dieser Konstante speichern werde. Der zurückgegebene Wert- und Verwendungsselektor übernimmt eine Funktion,
eine Funktion, die von React Redux für uns ausgeführt wird.
Eine Funktion, die den Status automatisch als Argument erhält, React Redux, die die Funktion für uns ausführt, stellt
dieser Funktion den aktuellen Status und den aktuellen Redux-Status zur Verfügung und kann dann alle gewünschten Daten aus diesem Status von
diesem globalen Status zurückgeben speichern, aus dem globalen Staat und ich verwende
diese Begriffe hier austauschbar.
Wie können wir dann Daten aus diesem Zustand hier im Funktionskörper abrufen
und ich verwende hier die Shortcut-Pfeilnotation, wo auf der rechten Seite des Pfeils diese automatisch zurückgegeben wird,
wenn sie nicht in geschweifte Klammern eingeschlossen ist. Nun, um Zugang zu etwas vom Staat zu bekommen,
müssen wir zu dem Ort zurückkehren, an dem wir den Laden erstellen. Dort übergebe ich einen Root-Reduzierer, der durch
Kombinieren aller Reduzierungen erstellt wird.
Wieder haben wir nur einen, aber ich erklärte, warum ich das getan habe.
Jetzt haben wir diesen Schlüssel, Mahlzeiten, die ganz bei Ihnen liegen. Sie können diesen
Namen so nennen, wie Sie möchten.
Dies gibt diesem Teil unseres Zustands, der von diesem Reduzierer verwaltet wird, eine Kennung, und
wir können diese Kennung jetzt verwenden, um den
Teil unseres Zustands zu erfassen, für den dieser Reduzierer verantwortlich ist.
Also am Ende ein Zustand, der so aussehen wird, wie dieser Anfangszustand. Also in der Kategorie Mahlzeit Bildschirm,
hier greife ich auf Status. Mahlzeiten oder was auch immer Sie als Kennung in kombinierten
Reduzierern gewählt haben und dann werde ich hier auf gefilterte Mahlzeiten zugreifen. Keine Mahlzeiten, die ich auch dort haben würde, wir
haben auch Mahlzeiten hier, aber ich möchte alle Filter respektieren, die eingestellt sind.
Im Moment haben wir keine Logik, um sie festzulegen,
aber damit werden wir uns in Zukunft ändern. Deshalb möchte ich hier meine gefilterten Mahlzeiten erhalten, damit ich immer
die Mahlzeiten bekomme, die ich wirklich anzeigen sollte, die Mahlzeiten, die dies respektieren Die vom
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
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
für Mahlzeiten, das ist alles nur Kleinbuchstaben, und wir haben diesen Import
erfolgreich beseitigt. Jetzt gehen wir weiter. Auf dem Lieblingsbildschirm importieren wir auch Mahlzeiten
und
wie zuvor sollten wir das loswerden, also machen wir das. Stattdessen verwende ich auch nach wie vor den Selector von React
Redux, um meine Mahlzeiten aus dem Laden zu holen. Daher erhalte ich hier, wo ich Mahlzeiten verwende, meine verfügbaren Mahlzeiten mit
dem Use Selector.
Dies gibt mir wieder einen Status und ich kann auf den Status zugreifen. Mahlzeiten. gefilterte Mahlzeiten, aber jetzt eigentlich
hier für
die Favoriten, möchte ich keine Filter respektieren, die gesetzt wurden, weil es meiner Meinung
nach sinnvoll ist, wenn wir unsere Favoriten anzeigen wollen, immer alle Favoriten zu sehen.
Sie könnten natürlich eine andere Logik haben und sich für die gefilterten Mahlzeiten entscheiden, aber ich werde hier nur
Mahlzeiten verwenden, also. Mahlzeiten. Mahlzeiten
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
unserer Staatsscheibe zu,
aber wenn Sie sich Ihren Reduzierer ansehen, ist dies natürlich nur teilweise sinnvoll,
weil wir Ich habe hier ein Lieblingsessen und das tun wir auch.
Eigentlich müssen wir unsere Favoriten nicht mehr so filtern und dies war sowieso nur ein Dummy-Filter. Es wurden
immer die Mahlzeiten mit m1 und m2 als ID verwendet. Stattdessen können wir sie für unsere
Lieblingsgerichte einfach durch Zugriff erhalten Hier auf unseren Mahlzeiten geben Sie Slice-Lieblingsgerichte an, daher
diese Eigenschaft, da wir die bevorzugten Mahlzeiten später in einem separaten Array in unserem Geschäft verwalten werden.
Das ist hier
also noch einfacher, sehr kurzer Code. Damit haben wir auch hier den Import von
Mahlzeiten beseitigt. Gehen wir zum Filterbildschirm.
Hier wird kein Essen importiert,
auf dem Bildschirm mit den Essensdetails wird hingegen eines angezeigt.
Also hier möchte ich
es loswerden und jetzt brauchen
wir hier die andere Mahlzeit-Eigenschaft, die ich vor einer Sekunde gezeigt habe, weil wir auch hier den Selektor von
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,
weil ich versuche, eine einzelne Mahlzeit nach ID zu laden, und daher sollte meine Basis, mein Array, in dem ich nach
dieser ID suche, natürlich eine sein Array mit allen Mahlzeiten und nicht gefiltert, da
mir keine festgelegten Filter wichtig sind. Hier suche ich nach einer bestimmten Mahlzeit mit einer
bestimmten ID und möchte eine vollständige Liste der Mahlzeiten erhalten. Daher benötigen wir diese ungefiltert Essensliste, die wir
hier verwalten.
Daher können wir hier jetzt unsere verfügbaren Mahlzeiten mit dem Verwendungswähler erhalten und dort verwenden
wir wieder die staatlichen Mahlzeiten. Mahlzeiten jetzt wirklich und jetzt können wir verfügbare Mahlzeiten
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
entfernen, da ich ihn sehe, aber wir werden tatsächlich ein Problem haben.
Möglicherweise stellen Sie fest, dass ich in der Kopfzeile auch versuche, eine Mahlzeit aus dem Menü "Mahlzeiten" zu finden,
und wir entfernen diesen Import.
Jetzt liegt das Problem auch hier in den Navigationsoptionen. Wir können den Use Selector Hook nicht verwenden,
da Sie Hooks nur innerhalb anderer Hooks oder innerhalb von Funktionskomponenten verwenden können. Dies ist keines davon,
es ist eine normale Funktion, keine Funktion Komponente und auch kein Haken.
Daher können wir hier keinen Verwendungsselektor verwenden, damit dies nicht funktioniert.
Jetzt könnten wir natürlich den Import von Mahlzeiten zurückbringen, aber das wäre ziemlich billig, da Sie in realen Anwendungen manchmal
die Situation haben, in der Sie Daten aus Ihrem Redux-Speicher in Ihren Navigationsdaten benötigen, und daher werden wir dies in
der
nächsten Vorlesung tun Nehmen Sie dies in Angriff und stellen Sie sicher, dass wir auch hier darauf zugreifen können.