1 00:00:02,640 --> 00:00:06,640 Damit ist der Teil mit den Lieblingsrezepten abgeschlossen. Jetzt ist 2 00:00:06,690 --> 00:00:12,270 es an der Zeit, sicherzustellen, dass wir unsere Rezepte tatsächlich filtern, da wir im Bildschirm 3 00:00:12,330 --> 00:00:17,260 "Kategorie Mahlzeiten" unsere gefilterten Mahlzeiten tatsächlich aus unserem Bundesstaat abrufen und im Moment 4 00:00:17,370 --> 00:00:24,870 natürlich in unserem Bundesstaat, der gefiltert wurde Das Essenseigentum enthält immer alle Mahlzeiten und ändert sich nie. Das möchte ich 5 00:00:24,870 --> 00:00:26,880 als nächsten Schritt ändern. 6 00:00:29,310 --> 00:00:35,910 Beginnen wir noch einmal mit dem Hinzufügen einer geeigneten Aktion, die mit dem Hinzufügen eines Bezeichners 7 00:00:35,910 --> 00:00:43,830 beginnt, den ich hier exportiere. Ich benenne diese Set-Filter und setze Filter auch hier als Text und erstelle einen 8 00:00:43,830 --> 00:00:47,150 passenden Action-Creator-Set-Filter für Action Creator, den ich 9 00:00:47,190 --> 00:00:53,550 hier erwarte Holen Sie sich ein Argument mit meinen Filtereinstellungen, das am Ende ein Objekt 10 00:00:53,580 --> 00:00:57,730 mit den darin enthaltenen Daten isGlutenFree, isLactoseFree, isVegan und isVegetarian 11 00:00:57,730 --> 00:01:05,040 sein sollte, und ich werde ein Aktionsobjekt zurückgeben, in dem der Kurstyp festgelegt ist, also diesen Bezeichner und 12 00:01:05,520 --> 00:01:12,000 dann den Filter, das ist mein Filtereinstellungsobjekt, also dieses Objekt mit allen wahren oder falschen 13 00:01:12,000 --> 00:01:15,030 Werten für die vier verschiedenen Filterkriterien, die 14 00:01:15,030 --> 00:01:17,880 wir haben. Das ist der 15 00:01:17,880 --> 00:01:24,900 Action-Schöpfer. Was sollen wir jetzt im Reduzierer tun? Im Reduzierer müssen wir jetzt diesen 16 00:01:24,900 --> 00:01:30,950 neuen Fall behandeln, daher füge ich hier vor dem Standard den Fall 17 00:01:30,950 --> 00:01:38,900 hinzu, in dem ich Set-Filter behandle, und dafür müssen Sie die Set-Filter-ID aus den Mahlzeitenaktionen und 18 00:01:38,900 --> 00:01:47,580 in Set-Filtern importieren Ziel ist es nun natürlich, unsere gefilterten Mahlzeiten zu aktualisieren, um die eingerichteten Filter widerzuspiegeln. 19 00:01:47,590 --> 00:01:53,350 Denken Sie jetzt daran, dass dies tatsächlich einen Filterschlüssel enthielt, 20 00:01:53,350 --> 00:02:04,630 der am Ende ein Javascript-Objekt sein wird, das so etwas wie glutenfrei: wahr, laktosefrei: falsch enthält, und wir möchten diese 21 00:02:04,630 --> 00:02:15,090 Einstellungen in unserem Array mit gefilterten Mahlzeiten widerspiegeln. Hier lassen Sie meine angewendeten Filter sagen, wo ich einfach die Filter aus den Aktionen extrahiere. 22 00:02:15,090 --> 00:02:16,770 Das ist natürlich ein Schritt, 23 00:02:16,830 --> 00:02:18,320 den Sie weglassen 24 00:02:18,320 --> 00:02:22,730 könnten. Ich versuche nur, verständlichen Code zu schreiben, der für sich selbst spricht. 25 00:02:22,890 --> 00:02:27,990 Ich extrahiere also nur die vom Benutzer eingerichteten Filter und wir 26 00:02:27,990 --> 00:02:29,190 kümmern uns 27 00:02:29,190 --> 00:02:40,740 darum, diese Aktion später auszulösen. Dann setze ich hier meine gefilterten Mahlzeiten und erstelle eine neue Konstante für gefilterte Mahlzeiten basierend auf meinen Gesamtmahlzeiten, also 28 00:02:40,740 --> 00:02:46,470 nicht Die gefilterten Mahlzeiten, aber alle verfügbaren Mahlzeiten und dort möchte ich sie 29 00:02:46,470 --> 00:02:47,280 mit 30 00:02:47,280 --> 00:02:53,670 der integrierten Filtermethode filtern, die Javascript anbietet. Filter gibt immer ein brandneues Array zurück, was gut ist, da 31 00:02:53,880 --> 00:02:55,470 ich noch kein vorhandenes Array 32 00:02:55,470 --> 00:03:02,370 bearbeiten möchte. Stattdessen möchte ich ein neues Array erhalten. In diesem Array werden alle Elemente gespeichert, für die diese Funktion übergeben wird Der Filter gibt 33 00:03:02,370 --> 00:03:08,850 true zurück und löscht alle Elemente, bei denen false zurückgegeben wird. Diese Funktion wird für jede Mahlzeit ausgeführt. In dieser 34 00:03:08,850 --> 00:03:14,250 Funktion können wir nun alle vom Benutzer festgelegten Filter durchgehen und prüfen, ob diese Mahlzeit mit 35 00:03:14,250 --> 00:03:20,100 einem der Filter übereinstimmt und daher gelöscht werden sollte oder ob sie sozusagen alle Filter besteht und 36 00:03:20,100 --> 00:03:21,240 sollte gehalten werden. 37 00:03:22,170 --> 00:03:29,460 Hier können wir also prüfen, ob Filter vorhanden sind. glutenfrei und ich erwarte einfach, dass meine Filter, entschuldigen 38 00:03:29,460 --> 00:03:33,920 Sie, Filter anwenden, dass dieses Objekt, das ich bekomme, einen glutenfreien Schlüssel hat. 39 00:03:34,290 --> 00:03:44,200 Wenn das stimmt und meine Mahlzeit nicht glutenfrei ist und ich daher hier ein Ausrufezeichen einfügen muss, dann weiß ich, dass 40 00:03:44,200 --> 00:03:51,220 diese Mahlzeit fallen gelassen werden sollte, oder? Weil es nicht glutenfrei ist, aber ich habe einen 41 00:03:51,220 --> 00:03:57,250 Filter, dass es glutenfrei sein sollte. Ich werde also false zurückgeben und kümmere mich nicht 42 00:03:57,250 --> 00:03:58,540 um andere Filter, 43 00:03:58,540 --> 00:04:06,220 da diese bereits nicht mit diesem Filter übereinstimmen. Ich kann sie löschen. Wenn wir es über diese Prüfung hinaus schaffen, können wir den nächsten Filter überprüfen, der 44 00:04:06,310 --> 00:04:07,150 filterlaktosefrei angewendet wird. 45 00:04:07,150 --> 00:04:11,820 Wenn das stimmt und meine Mahlzeit nicht laktosefrei ist, dieselbe Logik 46 00:04:11,830 --> 00:04:17,260 wie zuvor mit den Glutens, kann ich falsch zurückkehren und sie fallen lassen. 47 00:04:18,810 --> 00:04:29,370 Als nächstes, wenn überprüft, ob angewandte Filter vegetarisch eingestellt sind und meine Mahlzeit nicht vegetarisch ist, also dieselbe Logik wie zuvor, kann ich sie fallen lassen, weil ich möglicherweise die anderen 48 00:04:30,070 --> 00:04:34,930 Filter bestanden habe, aber wenn die Mahlzeit nicht vegetarisch ist, aber ich nach vegetarischen 49 00:04:34,930 --> 00:04:40,990 Mahlzeiten suche , dann sollte ich es loswerden. Und zu guter Letzt angewandte 50 00:04:40,990 --> 00:04:43,840 Filter. vegan. 51 00:04:43,930 --> 00:04:51,980 Wenn ich nach veganen Mahlzeiten suche, aber meine Mahlzeit hier und übrigens nicht vegan ist, nutze ich hier nur all diese Eigenschaften, die Teil 52 00:04:52,220 --> 00:04:55,290 meiner Mahlzeiten sind, wenn wir uns unsere Modelle ansehen, 53 00:04:55,340 --> 00:05:01,550 die Mahlzeit dort Wir haben isGlutenFree, isVegan und so weiter als Eigenschaften für jede einzelne Mahlzeit, sodass jede 54 00:05:01,640 --> 00:05:07,070 einzelne Mahlzeit die Informationen enthält, für welche Filter sie eingeschlossen oder ausgeschlossen werden sollten. Jede Mahlzeit 55 00:05:07,070 --> 00:05:07,690 hat 56 00:05:07,700 --> 00:05:10,940 diese und ich verwende sie hier nur im Reduzierer. 57 00:05:11,000 --> 00:05:18,170 Daher möchte ich hier im veganen Fall auch false zurückgeben, und nur wenn ich es über alle diese 58 00:05:18,230 --> 00:05:26,420 hinaus schaffe, wenn ich weiß, dass ich eine Mahlzeit habe, die allen von mir eingestellten Filtern entspricht, kann ich true zurückgeben. 59 00:05:26,540 --> 00:05:30,830 Ich bin immer noch in dieser Filtermethode und gebe true zurück, was bedeutet, 60 00:05:30,830 --> 00:05:38,390 dass ich diese Mahlzeit in meinen gefilterten Mahlzeiten konstant halten möchte. Dies ist mein neues Array. Nachdem ich dieses Array gefilterter Mahlzeiten abgeleitet habe, 61 00:05:38,810 --> 00:05:45,140 muss ich insgesamt einen neuen Status zurückgeben Kopieren Sie den alten Zustand und dann möchte ich meine gefilterten Mahlzeiten hier 62 00:05:45,140 --> 00:05:51,740 mit den gefilterten Mahlzeiten überschreiben, die ich hier abgeleitet habe. Gefilterte Mahlzeiten auf der linken Seite des Doppelpunkts sind 63 00:05:51,740 --> 00:05:53,010 also die 64 00:05:53,060 --> 00:05:59,540 Eigenschaft im Statusobjekt. Daher bezieht sich diese Eigenschaft und die gefilterten Mahlzeiten auf der rechten Seite des 65 00:05:59,540 --> 00:06:00,830 Doppelpunkts im Wesentlichen auf 66 00:06:01,110 --> 00:06:06,890 diese Konstante. Ich kann diese aktualisierten gefilterten Mahlzeiten auch benennen, um dies klarer zu machen. 67 00:06:06,940 --> 00:06:10,390 Auf diese Weise wird mein Status aktualisiert, wenn Filter festgelegt werden. 68 00:06:10,390 --> 00:06:13,570 Jetzt müssen wir natürlich sicherstellen, dass wir diese Aktion auch irgendwann auslösen.