Wir möchten diese Aktion natürlich auf dem Filterbildschirm auslösen, da wir dort
alle diese Filter einstellen.
Im Moment verwalten wir sie hier im internen Zustand und das wird auch so bleiben, weil wir unsere Filter
dort definitiv brauchen, aber jetzt
möchte ich natürlich eine Aktion auslösen, wenn die Schaltfläche Speichern gedrückt wird.
Zum Glück habe ich bereits die Verbindung zum Header mit Verwendungseffekt eingerichtet und Parameter
festgelegt. Wir müssen also nur das Konsolenprotokoll hier durch den Versand ersetzen.
Um den Versand zu verwenden, müssen wir zunächst den Verwendungsversand-Hook hier aus React Redux wie folgt importieren. Jetzt können wir
diesen Haken hier verwenden, um
Zugriff auf die Versandfunktion zu erhalten. Daher entspricht const dispatch der Verwendung
des als Funktion ausgeführten Verwendungsversands und jetzt können wir hier den
Versand aufrufen, um eine Aktion auszulösen, und daher müssen wir übrigens auch den Versand
als Abhängigkeit hinzufügen, aber React Redux wird sicherstellen, dass sich dies
nie ändert,
sodass dies niemals ein erneutes Rendern auslöst. wir
müssen es hinzufügen.
Das ist also Versand, jetzt wichtig, wir müssen meinen Aktionsersteller auch aus den Mahlzeiten der Speicheraktionen importieren, und natürlich spreche ich über den Aktionsersteller für festgelegte Filter, da ich das hier aufrufen muss, um eine
Aktion zu erstellen, die
ich zum Versand dort unten und weitergebe Setzen Sie Filter, sobald diese angewendeten Filter das Objekt weiterleiten, das
ich weiterleiten möchte, und dort habe ich glutenfrei, laktosefrei, vegan und das sollte nur
vegetarisch sein, wichtig, da die Schlüssel, die Sie hier einrichten, die Schlüssel sein müssen, die Sie
in Ihrem Reduzierer suchen , sonst funktioniert das nicht, wichtig.
Stellen Sie also wirklich sicher,
dass diese gleich sind, sonst funktioniert diese Logik nicht.
Jetzt versenden wir dies, wenn der Speichern-Button gedrückt wird, und dies sollte hoffentlich
unsere gefilterten Mahlzeiten anpassen. Dies sollte dann auf dem Bildschirm "Kategorie Mahlzeiten" angezeigt werden, da dort die
gefilterten Mahlzeiten abgerufen werden. Probieren wir es aus,
speichern wir
dies und zum Beispiel diesen Burger, wahrscheinlich nicht vegan.
Gehen wir also zu Filtern, schalten Sie Veganer ein, speichern Sie dies und ich erhalte eine Fehlermeldung. Ich kann keine variablen Aktionen finden, die vom Reduzierer für
Mahlzeiten ausgelöst
werden. Schauen wir uns das also an. Ja, es sind keine Aktionen, natürlich ist
es Aktion,
das ist der Name des Arguments.
Das sollte also Action sein,
ein kleiner Fehler, nur ein
Tippfehler. Versuchen
wir es noch einmal.
Gehen Sie zurück zu
Filtern, schalten Sie Veganer ein, speichern Sie diese und gehen Sie jetzt zu Mahlzeiten, Hamburgern und ich sehe sie hier
nicht, was gut ist, weil das bedeutet, dass es herausgefiltert ist. Meine Spaghetti mit Tomatensauce, das ist immer
noch da, denn das ist natürlich Vegan, zumindest ist das ohne Käse.
Das war's also, auf Deutsch ist das Schnitzel weg, schnell und
einfach, der Salat ist da, was Sinn macht.
Versuchen wir auch einen anderen Filter,
glutenfrei, jetzt
sollten die Spaghetti sicher weg sein,
also schauen wir
mal, ja, sie sind weg.
Salat ist immer noch
da, Spaghetti
sind weg, also scheint diese Logik zu funktionieren. Jetzt wichtig, wenn ich glutenfrei deaktiviert
habe und meine Spaghetti wieder sehe, wenn ich sie als Favorit hinzufüge und dann diesen Filter wieder hinzufüge, natürlich unter
den Mahlzeiten, sind sie weg, unter den Favoriten sehe ich sie, weil das die Logik ist Wir stellen fest, dass Favoriten keine Daten aus unseren
gefilterten Mahlzeiten übernehmen, sondern sich nur darum kümmern, ob es sich um einen Favoriten handelt
oder nicht.
Sie können diese Logik natürlich ändern, aber hier ist die Logik so, wie sie ist, und
nur die Mahlzeiten in den Kategorien hier werden gemäß den hier eingerichteten Filtern herausgefiltert.
Jetzt wäre es schön, hier eine nette kleine Fallback-Nachricht zu haben, wenn wir aufgrund
unserer Filter keine
Daten haben und daher in der Kategorie Mahlzeitenbildschirm auch hier überprüfen möchte, ob die angezeigte Essenslänge Null ist, was bedeutet, dass ich keine
Mahlzeiten zu haben habe anzeigen und dann möchte ich hier eine Ansicht mit meinem Standardtext zurückgeben. Das bedeutet, wir müssen
beide importieren, wir müssen eine Ansicht importieren und wir benötigen auch das Stylesheet von React Native und importieren die Standardtextkomponente
von Komponenten Standardtext und fügen Sie dann hier einen Stil hinzu, Stile.
Inhalt und der Standardtext, den wir anzeigen, sind möglicherweise keine gefundenen Mahlzeiten. Überprüfen Sie
möglicherweise Ihre Filter. Dies ist nur
ein Hinweis darauf, dass Ihre Filter möglicherweise die Rezepte deaktivieren, die Sie hier sehen sollten.
Fügen wir nun einfach diese Stilkonstante hier hinzu, wo wir ein neues Stylesheet erstellen,
und dort möchte ich diesen Inhaltsschlüssel einrichten, in dem ich Flex One verwende, und
dann den Inhalt mithilfe dieser Flexbox-Eigenschaften wieder horizontal und vertikal zentrieren.
Wenn wir es jetzt versuchen und es vielleicht auf Android testen,
nur um die Dinge zu verwechseln, obwohl es etwas langsamer ist, kann ich dort zu meinen Filtern gehen, glutenfrei einstellen, zu meinen Mahlzeiten zurückkehren, Italienisch also nicht
dort bekomme ich also diese nachricht. Auf der anderen Seite schnell und einfach, da
habe ich eine Mahlzeit und daher bekomme ich diese Meldung nicht
und daher sieht das nicht schlecht aus. Natürlich versuchen wir auch, diesen Filter wieder zu deaktivieren und zurück
zu gehen. Hier sind die Spaghetti . Das funktioniert jetzt alles und so können wir unseren Zustand mit Redux verwalten.