How can we use our store?
Well keep in mind that in the end here, I'm managing my meals, not my categories because we have no action
planned that would change anything there
but I'm managing my meals here.
So one great task would be to go everywhere in our app where we are importing meals from the dummy data
and get rid of that import and instead, get the data out of our store
because the difference will be that we can later add logic to change the data in our store whereas our
dummy data will never change.
So we should import data from our store, so that we can thereafter add logic to manipulate that data,
for example to restrict the meals we're displaying.
So where do we need the meals then? On the categories screen,
we're not importing meals. We got a couple of other imports we can actually get rid of but that's just a side
note,
we're not importing meals.
Categories can stay there because again, we'll not have any logic that changes that,
so we can move on. The category meals screen is a different story, there we are importing meals and now
the goal is to get rid of that import and get the meals out of the Redux store and
the question of course is, how do we do this? Again, the React Redux package helps us with that. From that
React Redux package, we can import something, we can import a hook, the use selector hook.
This allows us to select a slice of our state, of our globally managed state and use it in this component.
Now I'm using the hook here because that allows us to use this in a functional component,
you also might be aware of another approach where you actually import the connect function and wrap
your export with that and use map state to props, map dispatch to props,
that's something you can use as well,
it will absolutely work but this is a bit leaner,
so I'll go with use selector here. With that added,
now when we use our meals, we're not using them like this,
instead now we can get them with the help of use selector. So to derive our display meals,
what I'll do here is I'll create a new constant, available meals maybe, the name is up to you and use selector
here like this because this will retrieve me data out of the state and return it,
so that's what I'll then store here in this constant, the returned value and use selector takes a function,
a function that will be executed for us by React Redux.
A function that gets the state as an argument automatically, React Redux which executes the function
for us will provide the current state, the current Redux state to this function and it then is able to return
any data we want from that state, from that global store, from the global state
and I'm using these terms interchangeably here.
So how can we retrieve data from that state here in the function body then
and I'm using the shortcut arrow notation here where on the right side of the arrow, this is automatically
returned if it's not wrapped in curly braces. Well to get access to something from the state, we have
to go back to the place where we create the store, there I pass in a root reducer which is created by
combining all reducrs.
Again we only have one but I explained why I did this.
Now there we have this key, meals which is totally up to you,
you could name this whatever you want.
This gives this slice of our state which is managed by this reducer an identifier and we can now use
this identifier to get hold of that
part of our state for which this reducer is responsible.
So in the end, a state that will look like this, like this initial state. So in category meal screen, here
I access state.meals or whatever you chose as an identifier in combined reducers
and then here, I'll access filtered meals. Not meals which I would also have there,
we also have meals in here but I want to respect any filters that are set.
Right now, we have no logic to set them but with that we'll change in the future,
so here I want to get my filtered meals so that I always get the meals that I really should be able
to display, the meals that respect the filters set up by the user
and now it's the available meals which I want to filter even more here to find the meal for the category
ID I selected or the meals for the category I selected. With that, there is no more meals uppercase in
this file,
that's all just lowercase here and we got rid of that import successfully,
now let's move on. In the favorite screen, we're also importing meals and just as before, we should
get rid of that,
so let's do this. Instead, also just as before, I'll use use selector from React Redux to get my meals
from the store and therefore here where I use meals, I will actually get my available meals with
use selector.
Again this gives me a state and I can access state.meals.filtered meals but now actually here
for the favorites,
I don't want to respect any filters that were set because in my opinion it makes sense that when we
want to view our favorites, we always see all favorites.
You could of course have a different logic and go for the filtered meals but I will use just meals here,
so .meals.meals might look strange,
this selects the slice of our state and then in this slice, this meals thing here accesses this meals property
in our state slice
but of course if you have a look at your reducer, this only partly make sense right because we have
a favorite meals property here and indeed we do.
So actually, we don't need to filter our favorites like this anymore and this was just a dummy filter
anyways, it always took the meals with m1 and m2 as an ID, instead for our favorite meals,
we can just get them by accessing here on our meals state slice favorite meals,
so this property because we will later manage the favorited meals in a separate array in our store,
so that's even easier here,
very short code. So with that, we got rid of the meals import here as well,
let's move on to the filters screen.
There is no meals import here,
the meal detail screen on the other hand has one.
So here I want to get rid of it
and now here we'll need that other
meals property which I showed a second ago because again here, we can use use selector from React Redux
to select our meals because in here, we now have our component here where we use our meals and there,
I want to have an array with all meals because I'm trying to load a single meal by ID and therefore
my basis, my array in which I look for that ID should of course be an array with all meals and not
filtered because I don't care about any set filters, here I'm looking for a specific meal with a specific
ID and I want to get a full list of meals and that's therefore where we will need this unfiltered meals
list we're managing here.
So therefore here, we can now get our available meals with use selector and there again, we use the state
meals.meals now for real and now we can use available meals here to find the meal with that
ID. With that, we get rid of this import here as well, we can also remove the button import now that I
see it but we will actually have a problem.
You might notice that in the header, I actually also try to find a meal from the meals array and we remove
that import.
Now the problem also is here in the navigation options, we can't use the use selector hook because you
can only use hooks inside of other hooks or inside of functional components and this is neither of that,
it's a normal function, not a functional component and also not a hook.
So we can't use use selector in here so that won't work.
Now of course we could bring back the meals import but that would be kind of cheap because in real applications,
you will sometimes have that situation where you need data from your Redux store in your navigation
data
and therefore in the next lecture, we'll tackle this and make sure that we can also get access to this
here.