1 00:00:02,420 --> 00:00:07,190 Wir möchten diese Aktion natürlich auf dem Filterbildschirm auslösen, da wir dort 2 00:00:07,190 --> 00:00:08,870 alle diese Filter einstellen. 3 00:00:08,980 --> 00:00:14,980 Im Moment verwalten wir sie hier im internen Zustand und das wird auch so bleiben, weil wir unsere Filter 4 00:00:15,430 --> 00:00:17,490 dort definitiv brauchen, aber jetzt 5 00:00:17,680 --> 00:00:21,610 möchte ich natürlich eine Aktion auslösen, wenn die Schaltfläche Speichern gedrückt wird. 6 00:00:21,610 --> 00:00:26,210 Zum Glück habe ich bereits die Verbindung zum Header mit Verwendungseffekt eingerichtet und Parameter 7 00:00:26,530 --> 00:00:31,020 festgelegt. Wir müssen also nur das Konsolenprotokoll hier durch den Versand ersetzen. 8 00:00:31,180 --> 00:00:39,280 Um den Versand zu verwenden, müssen wir zunächst den Verwendungsversand-Hook hier aus React Redux wie folgt importieren. Jetzt können wir 9 00:00:39,330 --> 00:00:41,350 diesen Haken hier verwenden, um 10 00:00:41,350 --> 00:00:46,490 Zugriff auf die Versandfunktion zu erhalten. Daher entspricht const dispatch der Verwendung 11 00:00:46,910 --> 00:00:51,530 des als Funktion ausgeführten Verwendungsversands und jetzt können wir hier den 12 00:00:51,530 --> 00:00:57,070 Versand aufrufen, um eine Aktion auszulösen, und daher müssen wir übrigens auch den Versand 13 00:00:57,070 --> 00:01:01,700 als Abhängigkeit hinzufügen, aber React Redux wird sicherstellen, dass sich dies 14 00:01:01,700 --> 00:01:02,910 nie ändert, 15 00:01:02,990 --> 00:01:06,110 sodass dies niemals ein erneutes Rendern auslöst. wir 16 00:01:06,290 --> 00:01:07,950 müssen es hinzufügen. 17 00:01:08,120 --> 00:01:23,720 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 18 00:01:23,720 --> 00:01:25,730 Aktion zu erstellen, die 19 00:01:25,730 --> 00:01:33,870 ich zum Versand dort unten und weitergebe Setzen Sie Filter, sobald diese angewendeten Filter das Objekt weiterleiten, das 20 00:01:33,960 --> 00:01:40,170 ich weiterleiten möchte, und dort habe ich glutenfrei, laktosefrei, vegan und das sollte nur 21 00:01:40,170 --> 00:01:47,550 vegetarisch sein, wichtig, da die Schlüssel, die Sie hier einrichten, die Schlüssel sein müssen, die Sie 22 00:01:47,550 --> 00:01:52,380 in Ihrem Reduzierer suchen , sonst funktioniert das nicht, wichtig. 23 00:01:52,380 --> 00:01:55,110 Stellen Sie also wirklich sicher, 24 00:01:55,110 --> 00:01:58,820 dass diese gleich sind, sonst funktioniert diese Logik nicht. 25 00:01:58,840 --> 00:02:03,370 Jetzt versenden wir dies, wenn der Speichern-Button gedrückt wird, und dies sollte hoffentlich 26 00:02:03,370 --> 00:02:09,220 unsere gefilterten Mahlzeiten anpassen. Dies sollte dann auf dem Bildschirm "Kategorie Mahlzeiten" angezeigt werden, da dort die 27 00:02:09,220 --> 00:02:12,010 gefilterten Mahlzeiten abgerufen werden. Probieren wir es aus, 28 00:02:12,040 --> 00:02:13,340 speichern wir 29 00:02:13,750 --> 00:02:17,590 dies und zum Beispiel diesen Burger, wahrscheinlich nicht vegan. 30 00:02:18,010 --> 00:02:29,120 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 31 00:02:29,120 --> 00:02:30,010 Mahlzeiten ausgelöst 32 00:02:30,020 --> 00:02:35,710 werden. Schauen wir uns das also an. Ja, es sind keine Aktionen, natürlich ist 33 00:02:35,720 --> 00:02:37,020 es Aktion, 34 00:02:37,040 --> 00:02:39,230 das ist der Name des Arguments. 35 00:02:39,230 --> 00:02:40,610 Das sollte also Action sein, 36 00:02:40,610 --> 00:02:42,120 ein kleiner Fehler, nur ein 37 00:02:42,140 --> 00:02:43,150 Tippfehler. Versuchen 38 00:02:43,580 --> 00:02:44,660 wir es noch einmal. 39 00:02:44,690 --> 00:02:46,220 Gehen Sie zurück zu 40 00:02:46,220 --> 00:02:52,070 Filtern, schalten Sie Veganer ein, speichern Sie diese und gehen Sie jetzt zu Mahlzeiten, Hamburgern und ich sehe sie hier 41 00:02:52,090 --> 00:02:58,710 nicht, was gut ist, weil das bedeutet, dass es herausgefiltert ist. Meine Spaghetti mit Tomatensauce, das ist immer 42 00:02:58,710 --> 00:03:04,310 noch da, denn das ist natürlich Vegan, zumindest ist das ohne Käse. 43 00:03:04,500 --> 00:03:07,680 Das war's also, auf Deutsch ist das Schnitzel weg, schnell und 44 00:03:07,670 --> 00:03:10,050 einfach, der Salat ist da, was Sinn macht. 45 00:03:10,050 --> 00:03:12,060 Versuchen wir auch einen anderen Filter, 46 00:03:12,060 --> 00:03:13,110 glutenfrei, jetzt 47 00:03:13,110 --> 00:03:15,030 sollten die Spaghetti sicher weg sein, 48 00:03:15,030 --> 00:03:16,350 also schauen wir 49 00:03:16,350 --> 00:03:18,150 mal, ja, sie sind weg. 50 00:03:18,150 --> 00:03:19,140 Salat ist immer noch 51 00:03:19,140 --> 00:03:20,030 da, Spaghetti 52 00:03:20,040 --> 00:03:24,240 sind weg, also scheint diese Logik zu funktionieren. Jetzt wichtig, wenn ich glutenfrei deaktiviert 53 00:03:24,450 --> 00:03:32,040 habe und meine Spaghetti wieder sehe, wenn ich sie als Favorit hinzufüge und dann diesen Filter wieder hinzufüge, natürlich unter 54 00:03:32,070 --> 00:03:41,160 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 55 00:03:41,160 --> 00:03:46,860 gefilterten Mahlzeiten übernehmen, sondern sich nur darum kümmern, ob es sich um einen Favoriten handelt 56 00:03:46,860 --> 00:03:48,090 oder nicht. 57 00:03:48,210 --> 00:03:53,370 Sie können diese Logik natürlich ändern, aber hier ist die Logik so, wie sie ist, und 58 00:03:53,370 --> 00:03:57,980 nur die Mahlzeiten in den Kategorien hier werden gemäß den hier eingerichteten Filtern herausgefiltert. 59 00:03:58,200 --> 00:04:04,650 Jetzt wäre es schön, hier eine nette kleine Fallback-Nachricht zu haben, wenn wir aufgrund 60 00:04:05,130 --> 00:04:06,840 unserer Filter keine 61 00:04:06,840 --> 00:04:17,310 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 62 00:04:17,310 --> 00:04:26,170 Mahlzeiten zu haben habe anzeigen und dann möchte ich hier eine Ansicht mit meinem Standardtext zurückgeben. Das bedeutet, wir müssen 63 00:04:26,170 --> 00:04:34,980 beide importieren, wir müssen eine Ansicht importieren und wir benötigen auch das Stylesheet von React Native und importieren die Standardtextkomponente 64 00:04:35,070 --> 00:04:46,570 von Komponenten Standardtext und fügen Sie dann hier einen Stil hinzu, Stile. 65 00:04:50,270 --> 00:04:56,200 Inhalt und der Standardtext, den wir anzeigen, sind möglicherweise keine gefundenen Mahlzeiten. Überprüfen Sie 66 00:04:56,380 --> 00:04:59,310 möglicherweise Ihre Filter. Dies ist nur 67 00:04:59,310 --> 00:05:05,630 ein Hinweis darauf, dass Ihre Filter möglicherweise die Rezepte deaktivieren, die Sie hier sehen sollten. 68 00:05:05,640 --> 00:05:13,120 Fügen wir nun einfach diese Stilkonstante hier hinzu, wo wir ein neues Stylesheet erstellen, 69 00:05:13,160 --> 00:05:20,390 und dort möchte ich diesen Inhaltsschlüssel einrichten, in dem ich Flex One verwende, und 70 00:05:20,390 --> 00:05:26,640 dann den Inhalt mithilfe dieser Flexbox-Eigenschaften wieder horizontal und vertikal zentrieren. 71 00:05:28,100 --> 00:05:32,570 Wenn wir es jetzt versuchen und es vielleicht auf Android testen, 72 00:05:32,570 --> 00:05:43,440 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 73 00:05:43,440 --> 00:05:49,470 dort bekomme ich also diese nachricht. Auf der anderen Seite schnell und einfach, da 74 00:05:49,470 --> 00:05:53,320 habe ich eine Mahlzeit und daher bekomme ich diese Meldung nicht 75 00:05:53,400 --> 00:06:00,140 und daher sieht das nicht schlecht aus. Natürlich versuchen wir auch, diesen Filter wieder zu deaktivieren und zurück 76 00:06:00,160 --> 00:06:05,980 zu gehen. Hier sind die Spaghetti . Das funktioniert jetzt alles und so können wir unseren Zustand mit Redux verwalten.