We want to dispatch this action on the filters screen of course because that is where we do set all
these filters.
Right now, we manage them here in internal state and that will stay this way because we definitely need
our filters there
but now of course, I want to dispatch an action when the save button is pressed.
Thankfully, I already have the connection to the header set up with use effect and set params,
so all we have to do is replace console log here with dispatch.
Now of course to use dispatch, we first of all need to import the use dispatch hook here from React
Redux like this
and now we can use that hook here to get access to the dispatch function,
so const dispatch equals use dispatch executed as a function
and now we can call dispatch here to dispatch an action and
therefore we also by the way need to add dispatch as a dependency but React Redux will make sure
that this never changes,
so this won't ever trigger a re-render,
still, we have to add it.
So that's dispatch, now important, we also need to import my action creator from store actions meals and
of course I'm talking about the set filters
action creator because I need to call that here to create an action I pass to dispatch down there and
set filters once this applied filters object which I forward and there I have gluten free, lactose
free, vegan and that should be just vegetarian, important, because the keys you set up here have to be
the keys you're looking for in your reducer, otherwise this will not work, important.
So really make sure those are equal,
otherwise this logic will not work.
So now we're dispatching this whenever the save button is pressed and this hopefully should adjust our
filtered meals and that should then be reflected on the category meals screen because there we're retrieving
the filtered meals. Let's give it a try,
let's save this
and for example this burger, probably not vegan.
So let's go to filters, turn vegan on, save this and I get an error, can't find variable actions, thrown by
the meals reducer,
so let's have a look at that. Yes, it's not actions, of
course it's action,
that's the name of the argument.
So that should be action,
minor mistake,
just a typo,
let's give it another try.
Go back to filters,
turn on vegan, save this and now go to meals, hamburgers and
I'm not seeing them here which is good because that means it's filtered out. My spaghetti with tomato
sauce, that's still there because obviously that isVegan, at least this is without cheese.
So that's there, in German the schnitzel is gone,
quick and easy, the salad is there which makes sense.
Let's also try another filter,
gluten free,
now the spaghetti should be gone for sure,
so let's have a look,
yes they're gone.
Salad is still there,
spaghetti are gone,
so this logic seems to work. Now important,
if I disabled gluten free and therefore I see my spaghetti again, if I add them as a favorite and then
I add this filter again, of course under meals, they're gone, under favorites I see them because that's
the logic we set up, that favorites doesn't take data from our filtered meals but just cares about whether
it's a favorite or not.
You could of course change this logic but here the logic is what it is and only the meals in the categories
here are filtered out according to the filters you set up here.
Now it would be nice to have a nice little fallback message here if we have no data because of our filters
and therefore in the category meals screen,
I also want to check here if displayed meals length is zero, which means I have no meals to display and
then I want to return a view here with my default text in there actually and that means we need to import
both,
we need to import a view and we'll also need the stylesheet from React Native and import
the default text component from components default text and then add a style here,
styles.content
and the default text we display could be no meals found,
maybe check your filters,
just a hint that maybe your filters are disabling the recipes you should see here.
Now let's just add that styles constant here where we create a new stylesheet and there,
I want to set up that content key where I use flex one and then again center the content horizontally
and vertically with the help of these flexbox properties, like that.
If we now give this a try and maybe test this on Android, just to mix things up even though it's a bit
slower, I can go to my filters there, set gluten free, go back to my meals, Italian therefore, this is
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
get this message and therefore this doesn't look too bad
and of course let's also try disabling this filter again and go back,
here are the spaghetti. So that is now all working and this is how we can manage our state with Redux.