Beginnen wir mit den Favoriten.
Ich möchte sicherstellen, dass ich in einem Rezept auf diesen Stern klicken kann, der diesen als Favoriten hinzufügt und hier auf dem Favoritenbildschirm
angezeigt wird, auf dem derzeit nichts angezeigt wird, da ich diese Dummy-Favoriten entfernt habe.
Dazu
beginne ich im Speicherordner, im Aktionsordner und füge einen neuen Ordner hinzu, in dem ich auch Mahlzeiten benenne. js, Sie können es anders benennen, wenn das für Sie
verwirrend ist, aber ja, diese beiden Dateien Mahlzeiten. js hier in Aktionen
und Mahlzeiten. js in Reduzierern und in den Aktionen Mahlzeiten. In dieser
Datei werde ich einige Redux-Aktionen einrichten, die normalerweise mit dem Einrichten einiger
eindeutiger Bezeichner beginnen, die ich in Konstanten speichere und die Favoriten umschalten.
Sie können hier alles verwenden,
was Sie möchten. Der Wert, den Sie hier speichern, ist normalerweise
derselbe Bezeichner. Dies ist also der Bezeichnerwert, der einfach in einer Konstante gespeichert wird, damit wir ihn später
nicht manuell eingeben müssen, sondern immer importieren können diese Konstante und
Tippfehler vermeiden.
Wenn es für Sie
brandneu ist, schauen Sie sich auf jeden Fall zuerst eine dedizierte React Redux-Ressource an.
Jetzt verwende ich hier auch das Aktionserstellungsmuster, was bedeutet,
dass ich diesen Bezeichner hier habe, aber jetzt exportiere ich auch eine Funktion, die mir eine Aktion erstellt, da eine Aktion
nicht nur häufig nur ein Bezeichner ist, und in diesem Fall ist dies auch der
Fall benötigt eine zusätzliche Nutzlast und daher haben wir tatsächlich eine Aktion, die ein Objekt mit Bezeichner und
Nutzlast ist. Daher füge ich hier eine Funktion hinzu, die mir ein solches Aktionsobjekt erstellt, und benenne diesen Umschaltfavoriten so,
wähle den Bezeichner aus
Aber im Fall eines Kamels und dies ist eine Funktion, die einige Daten empfangen kann, weil ich derjenige
bin, der sie aufruft, und die ein Javascript-Objekt zurückgeben sollte, das diese Aktion beschreibt, also einen Typ hat.
So nennen Sie normalerweise dieses Bezeichnerfeld
Es steht Ihnen jedoch im Allgemeinen frei, dort zu verwenden, was Sie möchten, und in
meinem
Fall wird dies der Favorit sein.
Ich zeige also auf diesen Bezeichner. Ich verwende diesen String als Bezeichner und dann alle zusätzlichen Daten, die Sie möchten,
zum Beispiel hier. Ich muss Werbung machen d die Mahlzeit-ID der Mahlzeit, die umgeschaltet werden soll, und das bedeutet,
dass diese Funktion diese ID auch als Eingabe erhalten muss, da ich sie sonst nicht in
der von mir erstellten Aktion speichern kann.
Dies ist also mein Aktionsersteller für die Umschalt-Lieblingsaktion. Jetzt im Reduzierer möchte
ich handeln, wenn ich eine solche Umschalt-Lieblingsaktion erhalte. Dafür verwende ich ein Muster, das Sie wahrscheinlich gesehen haben,
wenn
Sie zuvor mit Redux gearbeitet haben Ich werde hier eine switch-Anweisung verwenden und meinen Aktionstyp
einschalten, da zu beachten ist, dass die Aktion ein Objekt mit einer type-Eigenschaft ist, die die aufgetretene Aktion identifiziert.
Also schalte ich diesen Aktionstyp ein und behandle dann verschiedene Fälle für die verschiedenen Aktionen,
die ich möglicherweise habe.
Hier habe ich also die Option zum Umschalten der Favoriten und dafür müssen Sie die Favoriten zum Umschalten aus den Aktionsmahlzeiten importieren. Deshalb
speichere ich diese in der separaten Konstante, da ich jetzt die Optionen zum Umschalten nicht manuell eingeben muss,
wo ich möglicherweise eine habe Tippfehler, stattdessen
verwende ich nur die Konstante, in der die Zeichenfolge gespeichert ist. Und jetzt führe ich hier die Logik aus, die ich ausführen
möchte, um dann mit dieser Aktion zu arbeiten und meinen Status so zu ändern, dass die Mahlzeit mit der Mahlzeit-ID,
die Teil meiner Aktion ist, zu den Lieblingsmahlzeiten hinzugefügt oder von dort entfernt wird, wenn sie bereits Teil war Es ist eine
Umschaltaktion hier. Ich möchte
Elemente hinzufügen, die noch keine Favoriten sind. Ich möchte Elemente entfernen, die es sind. Nebenbei bemerkt, in der switch-Anweisung werde ich auch einen
Standardfall hinzufügen, in dem ich nur den unveränderten Status zurückgebe.
Wir sollten das nicht wirklich erreichen, aber falls wir es tun, dann tun wir
das, aber zurück zum Lieblingsfall. Dort möchte ich jetzt am
Ende herausfinden, ob meine Mahlzeit mit der ID, die Teil der Aktion ist, weil ich die Mahlzeit-ID zur
Aktion hinzufüge, wenn diese Mahlzeit
bereits Teil der Lieblingsmahlzeiten ist, wenn
ja, möchte
ich entferne es, wenn es nicht ist, möchte ich es hinzufügen. Zu diesem Zweck beginne ich damit, den Index der Mahlzeit im Array der Lieblingsmahlzeiten
zu finden. Wenn dies dann -1 ist, weiß ich, dass ich keinen Index gefunden habe, sodass er nicht Teil war, wenn er größer oder gleich
ist
Null, ich weiß, dass der Gegenstand ein Teil davon war. Also habe ich hier meinen vorhandenen Index und
erhalte diesen durch Verwendung von Lieblingsgerichten des Staates. Dort habe ich ein Gleichheitszeichen eingegeben und der Zustand ist einfach mein aktueller Zustandsschnappschuss, den ich
bekomme. Dort haben wir eine Lieblingsmahlzeit und ich kann Verwenden Sie die Find-Index-Methode, eine normale
Javascript-Methode, die ich für Arrays verwenden kann, um den Index eines Elements abzurufen, das einem bestimmten Kriterium entspricht,
das ich hier in einer Funktion eingerichtet habe, die ich zum Suchen des Index übergebe. Diese Funktion
wird bei jeder Mahlzeit im ausgeführt Array und wenn es true zurückgibt, gibt es mir den Index des Elements, für
das es durchlaufen wurde.
Also hier möchte ich wahr zurückkehren, wenn Essen. id ist gleich action. MahlzeitId. Das bedeutet einfach, dass die Mahlzeit,
die ich in meinen Lieblingsmahlzeiten betrachte, dieselbe Idee hat wie die Mahlzeit, für die diese Aktion
ausgeführt wird, und das bedeutet, wenn dies für einen Punkt in Lieblingsmahlzeiten zutrifft, dass die Mahlzeit, die wir umschalten möchten
ist bereits Teil der Favoriten, daher müssen wir es entfernen, da dies uns nun den
Index
des Elements zurückgibt. Daher ist der vorhandene Index größer als -1 und wir können diesen Index dann verwenden, um
ihn zu entfernen.
Wenn dies für keinen Artikel wahr ist, und wenn dies am
Ende -1 zurückgibt, weiß ich, dass der Artikel noch nicht Teil der Lieblingsgerichte ist. Der vorhandene Index enthält also sehr wichtige Informationen,
und daher werde ich ihn hier in einer if-Anweisung verwenden und prüfen, ob
der vorhandene Index größer oder gleich 0 ist, was bedeutet, dass wir diese Mahlzeit bereits als Teil der
Lieblingsmahlzeiten haben oder nicht.
Im Fall if, damit der Artikel bereits Teil der Lieblingsgerichte ist, möchte ich ihn entfernen.
Hier werde ich also am Ende einen neuen Zustand zurückgeben, weil Sie in Ihrem Reduzierer
am Ende einen neuen Zustand zurückgeben müssen, der ein neues Objekt ist, bei dem ich zuerst den vorhandenen Zustand mit dem Spread-Operator hier
kopiere,
um ihn herauszuziehen Alle Schlüssel-Wert-Paare des vorhandenen Status, damit ich keinen Status verliere
und keinen Status
überschreibe, den ich nicht überschreiben möchte. Dann überschreibe ich nur die Lieblingsgerichte, also füge ich dies
hinzu Eigenschaft wieder, um die vorhandenen Lieblingsgerichte mit meinen neuen Lieblingsgerichten zu überschreiben, die am Ende die
alten Lieblingsgerichte ohne den Punkt in diesem Index sein sollten.
Und jetzt, um meine aktualisierten Lieblingsgerichte zu erhalten, werde ich eine neue Konstante erstellen, aktualisiertFavMeals. Dort werde
ich zuerst ein neues Array erstellen und es mit meinen vorhandenen Mahlzeiten füllen. Verschieben Sie also meine vorhandenen Lieblingsgerichte wie folgt und ich mache das
Um eine Kopie dieses Arrays zu erstellen, damit ich das ursprüngliche Array nicht manipuliere, wenn ich jetzt damit
arbeite, weil ich jetzt meine aktualisierten Lieblingsmahlzeiten übernehmen möchte, rufen Sie hier splice auf und entfernen Sie dann
das Element im vorhandenen Index und nur dieses Element.
Dies wird also am Ende diesen aktualisierten FavMeals-Index nehmen, ihn bearbeiten und das Element in diesem Index entfernen und
dieses Array bearbeiten. Deshalb habe
ich ihn kopiert, damit ich das ursprüngliche Array nicht bearbeite. Jetzt können wir dieses aktualisierte FavMeals-Array hier
und hier verwenden Bewahren Sie dies als Lieblingsessen in unserem Geschäft auf, da dies das
Lieblingsgericht ohne das gerade entfernte Essen ist.
In dem anderen Fall, der natürlich relevant ist, wenn wir kein Produkt finden und es hinzufügen
möchten, möchte ich hier auch einen neuen Status zurückgeben, in dem ich zuerst den alten Status kopiere
und dann Lieblingsgerichte überschreibe Im Grunde genommen sind es meine alten Lieblingsgerichte, und jetzt kann
ich concat aufrufen, eine in Javascript integrierte Javascript-Methode, die ein neues Array zurückgibt, das das
alte Array übernimmt und ein neues Element hinzufügt, und dort möchte ich das Essen für diese ID hier
und natürlich hinzufügen Ich kann diese Mahlzeit in meinem Zustand finden, dort auf Mahlzeiten, dies ist diese Eigenschaft, Zustand bezieht sich hier übrigens immer
nur auf diese Zustandsstruktur hier und jetzt kann ich
hier die Mahlzeit finden, die ich hinzufügen möchte, und da dies sehr wird
Lange werde ich dies tatsächlich in eine neue Zeile
auslagern, sodass meine Mahlzeit, die ich hinzufügen möchte, mit der Suchmethode gefunden werden kann, die für alle Mahlzeiten ausgeführt wird, und dort, wenn
die Mahlzeit-ID gleich der Aktion ist. MahlzeitId, dann habe ich die Mahlzeit, die ich hinzufügen möchte, und es ist
diese Mahlzeit, die ich zu meinen Lieblingsmahlzeiten verkette, so dass ich diese zu diesem Array hinzufüge. Das sollte eine Logik
sein, die funktioniert und die unsere Favoriten verwaltet.
Jetzt müssen wir sicherstellen, dass wir diese Aktion tatsächlich auslösen, wenn wir auf das Sternsymbol in unserer Kopfzeile
klicken.
Um die Aktion
auszulösen, gehen wir zum Detailbildschirm für Mahlzeiten, da hier unser Sternsymbol
angezeigt wird. Wenn ich diese Taste drücke, möchte ich am Ende eine Aktion auslösen.
Die gute Nachricht ist, dass das Versenden von
Aktionen sehr einfach
ist. Wir haben einen Verwendungswähler und einen Verwendungsversand, der uns am Ende eine einfache Möglichkeit bietet, eine Funktion auszulösen.
Die schlechte Nachricht ist, dass dies hier natürlich nur im Komponentenkörper, in unserer Funktionskomponente und nicht in den
Navigationsoptionen verwendet werden kann.
Wir müssen also wieder mit festgelegten Parametern arbeiten, um zwischen den Navigationsoptionen und der Komponente zu kommunizieren,
aber das können wir natürlich tun. Hier im Bildschirm mit den Details zu
den Mahlzeiten beginne ich einfach mit dem Aufruf von use dispatch. Dadurch erhalten wir eine Versandfunktion, eine Funktion, die wir zum Versenden neuer Aktionen
aufrufen können, und ich speichere sie in einer Konstanten mit dem Namen dispatch. Als nächstes möchte ich einen
umschaltbaren Lieblingshandler erstellen, eine Funktion, die am Ende diese Aktion auslösen soll.
Hier möchte ich also den Versand aufrufen, den ich dank dieses Hakens zur Verfügung habe, und
jetzt muss ich zum Versenden die Aktion weiterleiten, die ich versenden möchte,
und dafür verwende ich diesen Aktionsersteller, um den Favoriten hier umzuschalten.
Also müssen wir dies nur importieren, aus dem Geschäftsordner importieren,
dort aus Aktionen und dort aus den Mahlzeiten. js-Datei, von dort möchte ich den Umschaltfavoriten
importieren, nicht den Bezeichner in Großbuchstaben, sondern diese Aktionserstellungsfunktion. Wenn das hier importiert ist, können wir im Versand
einen solchen Umschaltfavoriten nennen, und jetzt müssen wir hier die ID weiterleiten,
und das ist natürlich die Mahlzeit-ID, die wir dort oben bereits
extrahiert haben, oder ausgewählte Mahlzeit. Ich würde auch funktionieren, was
auch immer du willst, ich gehe einfach zum Essen.
Jetzt können wir den Verwendungseffekt reaktivieren, um mit unserem Header zu kommunizieren, allerdings nicht mit dieser Zeile, sondern mit
den Parametern für die Requisitennavigation. Jetzt werde ich diesen Umschaltfavoriten benennen. Der Name liegt bei Ihnen
und zeigt auf meinen umschaltbaren Lieblingshandler.
Jetzt sollte der Umschalt-Lieblingshandler hier als Abhängigkeit hinzugefügt werden. Um Endlosschleifen zu vermeiden, verwende
ich wieder den Rückruf verwenden, den ich aus React importiere, um diese Funktion hier zu verpacken.
Hier wird also Use Callback um diese Funktion gewickelt, und wir müssen hier Abhängigkeiten angeben, und Abhängigkeit Nummer eins ist Versand.
React Redux wird sicherstellen, dass sich dies jedoch nie
ändert. Das ist also eine Abhängigkeit, die sich nie ändern wird. Abhängigkeit zwei ist
Mahlzeit-ID, das auch sollte
sich nicht ändern, während wir auf dieser
Seite sind, es wird immer den gleichen Wert haben. Daher sollte diese Funktion nicht wirklich neu erstellt werden, was
bedeutet, dass dieser Effekt niemals erneut ausgeführt wird, es sei denn, er wird neu erstellt. Dies ist nur dann
der Fall, wenn wir eine neue ID hatten. In diesem Fall wäre es gut, wenn dies neu erstellt wird, aber ansonsten hat dies gewonnen nicht ändern und
daher sollten wir hier einen sicheren Kommunikationskanal haben.
Jetzt in der Kopfzeile können wir diesen Handler extrahieren. Übrigens brauchen wir
hier auch nicht mehr die
Mahlzeit-ID. Wir können jetzt einfach die Lieblingsfunktion zum Umschalten aus unserer Navigationsdaten-Navigation abrufen und dann diesen Umschalt-Favoriten benennen Das
ist also der Parametername, den wir extrahieren können, und dies sollte uns Zugriff auf
diese Funktion geben, die wir übergeben. Jetzt ist das Umschalten des Favoriten das, was tatsächlich ausgeführt werden sollte, wenn
wir diese Taste drücken.
Hier werde ich also auf Favoriten umschalten zeigen, da dies einen Zeiger auf diese Funktion enthält und diese Funktion
daher ausgeführt wird, wenn wir jetzt diesen Stern drücken. Nun, wir werden sehen, ob das funktioniert.
Speichern wir das und gehen wir zurück zu den Spaghetti hier und klicken Sie auf diesen Stern und klicken Sie auf Favoriten und das
sieht
gut aus, Spaghetti sind Teil der Favoriten.
Klicken wir hier noch einmal auf den Stern und gehen zu den Favoriten. Es ist weg,
das macht sehr viel Sinn.
Klicken Sie erneut darauf, es ist wieder da, gehen Sie zur Detailseite hier auf der Registerkarte "Favoriten" und klicken Sie auf den Stern
und gehen Sie zurück, nun, es ist weg.
Lassen Sie es uns auch auf Android überprüfen, für das Schnitzel sind die Favoriten momentan vielleicht leer. Gehen wir zurück und klicken Sie auf den Stern,
gehen Sie zu den Favoriten, hier ist es,
gehen Sie zurück, klicken Sie auf den Stern und es ist weg. Diese Logik funktioniert also im Allgemeinen.
Es gibt ein paar Dinge, an denen ich noch arbeiten möchte, zum Beispiel möchte ich
das Symbol basierend auf
dem Favoritenstatus ändern. Ich möchte auch Text auf dem Favoritenbildschirm anzeigen, wenn er leer ist, aber im Allgemeinen funktioniert das Versenden
und Verwenden der Daten auch wenn wir es in einem Header brauchen.