1 00:00:02,420 --> 00:00:07,190 We want to dispatch this action on the filters screen of course because that is where we do set all 2 00:00:07,190 --> 00:00:08,870 these filters. 3 00:00:08,980 --> 00:00:14,980 Right now, we manage them here in internal state and that will stay this way because we definitely need 4 00:00:15,430 --> 00:00:17,490 our filters there 5 00:00:17,680 --> 00:00:21,610 but now of course, I want to dispatch an action when the save button is pressed. 6 00:00:21,610 --> 00:00:26,210 Thankfully, I already have the connection to the header set up with use effect and set params, 7 00:00:26,530 --> 00:00:31,020 so all we have to do is replace console log here with dispatch. 8 00:00:31,180 --> 00:00:39,280 Now of course to use dispatch, we first of all need to import the use dispatch hook here from React 9 00:00:39,330 --> 00:00:41,350 Redux like this 10 00:00:41,350 --> 00:00:46,490 and now we can use that hook here to get access to the dispatch function, 11 00:00:46,910 --> 00:00:51,530 so const dispatch equals use dispatch executed as a function 12 00:00:51,530 --> 00:00:57,070 and now we can call dispatch here to dispatch an action and 13 00:00:57,070 --> 00:01:01,700 therefore we also by the way need to add dispatch as a dependency but React Redux will make sure 14 00:01:01,700 --> 00:01:02,910 that this never changes, 15 00:01:02,990 --> 00:01:06,110 so this won't ever trigger a re-render, 16 00:01:06,290 --> 00:01:07,950 still, we have to add it. 17 00:01:08,120 --> 00:01:23,720 So that's dispatch, now important, we also need to import my action creator from store actions meals and 18 00:01:23,720 --> 00:01:25,730 of course I'm talking about the set filters 19 00:01:25,730 --> 00:01:33,870 action creator because I need to call that here to create an action I pass to dispatch down there and 20 00:01:33,960 --> 00:01:40,170 set filters once this applied filters object which I forward and there I have gluten free, lactose 21 00:01:40,170 --> 00:01:47,550 free, vegan and that should be just vegetarian, important, because the keys you set up here have to be 22 00:01:47,550 --> 00:01:52,380 the keys you're looking for in your reducer, otherwise this will not work, important. 23 00:01:52,380 --> 00:01:55,110 So really make sure those are equal, 24 00:01:55,110 --> 00:01:58,820 otherwise this logic will not work. 25 00:01:58,840 --> 00:02:03,370 So now we're dispatching this whenever the save button is pressed and this hopefully should adjust our 26 00:02:03,370 --> 00:02:09,220 filtered meals and that should then be reflected on the category meals screen because there we're retrieving 27 00:02:09,220 --> 00:02:12,010 the filtered meals. Let's give it a try, 28 00:02:12,040 --> 00:02:13,340 let's save this 29 00:02:13,750 --> 00:02:17,590 and for example this burger, probably not vegan. 30 00:02:18,010 --> 00:02:29,120 So let's go to filters, turn vegan on, save this and I get an error, can't find variable actions, thrown by 31 00:02:29,120 --> 00:02:30,010 the meals reducer, 32 00:02:30,020 --> 00:02:35,710 so let's have a look at that. Yes, it's not actions, of 33 00:02:35,720 --> 00:02:37,020 course it's action, 34 00:02:37,040 --> 00:02:39,230 that's the name of the argument. 35 00:02:39,230 --> 00:02:40,610 So that should be action, 36 00:02:40,610 --> 00:02:42,120 minor mistake, 37 00:02:42,140 --> 00:02:43,150 just a typo, 38 00:02:43,580 --> 00:02:44,660 let's give it another try. 39 00:02:44,690 --> 00:02:46,220 Go back to filters, 40 00:02:46,220 --> 00:02:52,070 turn on vegan, save this and now go to meals, hamburgers and 41 00:02:52,090 --> 00:02:58,710 I'm not seeing them here which is good because that means it's filtered out. My spaghetti with tomato 42 00:02:58,710 --> 00:03:04,310 sauce, that's still there because obviously that isVegan, at least this is without cheese. 43 00:03:04,500 --> 00:03:07,680 So that's there, in German the schnitzel is gone, 44 00:03:07,670 --> 00:03:10,050 quick and easy, the salad is there which makes sense. 45 00:03:10,050 --> 00:03:12,060 Let's also try another filter, 46 00:03:12,060 --> 00:03:13,110 gluten free, 47 00:03:13,110 --> 00:03:15,030 now the spaghetti should be gone for sure, 48 00:03:15,030 --> 00:03:16,350 so let's have a look, 49 00:03:16,350 --> 00:03:18,150 yes they're gone. 50 00:03:18,150 --> 00:03:19,140 Salad is still there, 51 00:03:19,140 --> 00:03:20,030 spaghetti are gone, 52 00:03:20,040 --> 00:03:24,240 so this logic seems to work. Now important, 53 00:03:24,450 --> 00:03:32,040 if I disabled gluten free and therefore I see my spaghetti again, if I add them as a favorite and then 54 00:03:32,070 --> 00:03:41,160 I add this filter again, of course under meals, they're gone, under favorites I see them because that's 55 00:03:41,160 --> 00:03:46,860 the logic we set up, that favorites doesn't take data from our filtered meals but just cares about whether 56 00:03:46,860 --> 00:03:48,090 it's a favorite or not. 57 00:03:48,210 --> 00:03:53,370 You could of course change this logic but here the logic is what it is and only the meals in the categories 58 00:03:53,370 --> 00:03:57,980 here are filtered out according to the filters you set up here. 59 00:03:58,200 --> 00:04:04,650 Now it would be nice to have a nice little fallback message here if we have no data because of our filters 60 00:04:05,130 --> 00:04:06,840 and therefore in the category meals screen, 61 00:04:06,840 --> 00:04:17,310 I also want to check here if displayed meals length is zero, which means I have no meals to display and 62 00:04:17,310 --> 00:04:25,780 then I want to return a view here with my default text in there actually and that means we need to import 63 00:04:25,780 --> 00:04:26,170 both, 64 00:04:26,170 --> 00:04:34,980 we need to import a view and we'll also need the stylesheet from React Native and import 65 00:04:35,070 --> 00:04:45,400 the default text component from components default text and then add a style here, 66 00:04:45,790 --> 00:04:46,570 styles.content 67 00:04:50,270 --> 00:04:56,200 and the default text we display could be no meals found, 68 00:04:56,380 --> 00:04:59,310 maybe check your filters, 69 00:04:59,310 --> 00:05:05,630 just a hint that maybe your filters are disabling the recipes you should see here. 70 00:05:05,640 --> 00:05:13,120 Now let's just add that styles constant here where we create a new stylesheet and there, 71 00:05:13,160 --> 00:05:20,390 I want to set up that content key where I use flex one and then again center the content horizontally 72 00:05:20,390 --> 00:05:26,640 and vertically with the help of these flexbox properties, like that. 73 00:05:28,100 --> 00:05:32,570 If we now give this a try and maybe test this on Android, just to mix things up even though it's a bit 74 00:05:32,570 --> 00:05:43,440 slower, I can go to my filters there, set gluten free, go back to my meals, Italian therefore, this is 75 00:05:43,440 --> 00:05:49,470 not there so I get this message. On the other hand quick and easy, there I do have a meal and hence I don't 76 00:05:49,470 --> 00:05:53,320 get this message and therefore this doesn't look too bad 77 00:05:53,400 --> 00:06:00,140 and of course let's also try disabling this filter again and go back, 78 00:06:00,160 --> 00:06:05,980 here are the spaghetti. So that is now all working and this is how we can manage our state with Redux.