1
00:00:02,360 --> 00:00:04,430
How can we use our store?

2
00:00:04,430 --> 00:00:11,240
Well keep in mind that in the end here, I'm managing my meals, not my categories because we have no action

3
00:00:11,240 --> 00:00:13,490
planned that would change anything there

4
00:00:13,670 --> 00:00:15,530
but I'm managing my meals here.

5
00:00:15,650 --> 00:00:22,990
So one great task would be to go everywhere in our app where we are importing meals from the dummy data

6
00:00:23,110 --> 00:00:26,970
and get rid of that import and instead, get the data out of our store

7
00:00:26,980 --> 00:00:32,650
because the difference will be that we can later add logic to change the data in our store whereas our

8
00:00:32,650 --> 00:00:34,170
dummy data will never change.

9
00:00:34,180 --> 00:00:38,980
So we should import data from our store, so that we can thereafter add logic to manipulate that data,

10
00:00:39,280 --> 00:00:42,970
for example to restrict the meals we're displaying.

11
00:00:42,980 --> 00:00:47,510
So where do we need the meals then? On the categories screen,

12
00:00:47,510 --> 00:00:52,130
we're not importing meals. We got a couple of other imports we can actually get rid of but that's just a side

13
00:00:52,130 --> 00:00:52,490
note,

14
00:00:52,550 --> 00:00:53,840
we're not importing meals.

15
00:00:53,870 --> 00:00:58,340
Categories can stay there because again, we'll not have any logic that changes that,

16
00:00:58,490 --> 00:01:05,690
so we can move on. The category meals screen is a different story, there we are importing meals and now

17
00:01:05,690 --> 00:01:09,530
the goal is to get rid of that import and get the meals out of the Redux store and

18
00:01:09,530 --> 00:01:16,640
the question of course is, how do we do this? Again, the React Redux package helps us with that. From that

19
00:01:16,730 --> 00:01:25,010
React Redux package, we can import something, we can import a hook, the use selector hook.

20
00:01:25,020 --> 00:01:32,210
This allows us to select a slice of our state, of our globally managed state and use it in this component.

21
00:01:32,220 --> 00:01:36,660
Now I'm using the hook here because that allows us to use this in a functional component,

22
00:01:36,660 --> 00:01:42,480
you also might be aware of another approach where you actually import the connect function and wrap

23
00:01:42,480 --> 00:01:47,220
your export with that and use map state to props, map dispatch to props,

24
00:01:47,220 --> 00:01:49,010
that's something you can use as well,

25
00:01:49,020 --> 00:01:51,560
it will absolutely work but this is a bit leaner,

26
00:01:51,580 --> 00:01:56,140
so I'll go with use selector here. With that added,

27
00:01:56,260 --> 00:01:59,510
now when we use our meals, we're not using them like this,

28
00:01:59,710 --> 00:02:07,270
instead now we can get them with the help of use selector. So to derive our display meals,

29
00:02:07,270 --> 00:02:15,400
what I'll do here is I'll create a new constant, available meals maybe, the name is up to you and use selector

30
00:02:15,400 --> 00:02:19,920
here like this because this will retrieve me data out of the state and return it,

31
00:02:19,930 --> 00:02:25,450
so that's what I'll then store here in this constant, the returned value and use selector takes a function,

32
00:02:26,110 --> 00:02:29,920
a function that will be executed for us by React Redux.

33
00:02:29,920 --> 00:02:36,430
A function that gets the state as an argument automatically, React Redux which executes the function

34
00:02:36,430 --> 00:02:44,140
for us will provide the current state, the current Redux state to this function and it then is able to return

35
00:02:44,200 --> 00:02:48,810
any data we want from that state, from that global store, from the global state

36
00:02:48,850 --> 00:02:50,640
and I'm using these terms interchangeably here.

37
00:02:52,910 --> 00:02:56,380
So how can we retrieve data from that state here in the function body then

38
00:02:56,420 --> 00:03:01,370
and I'm using the shortcut arrow notation here where on the right side of the arrow, this is automatically

39
00:03:01,370 --> 00:03:06,860
returned if it's not wrapped in curly braces. Well to get access to something from the state, we have

40
00:03:06,860 --> 00:03:12,560
to go back to the place where we create the store, there I pass in a root reducer which is created by

41
00:03:12,560 --> 00:03:14,120
combining all reducrs.

42
00:03:14,150 --> 00:03:17,250
Again we only have one but I explained why I did this.

43
00:03:17,300 --> 00:03:20,980
Now there we have this key, meals which is totally up to you,

44
00:03:20,990 --> 00:03:22,640
you could name this whatever you want.

45
00:03:22,640 --> 00:03:29,030
This gives this slice of our state which is managed by this reducer an identifier and we can now use

46
00:03:29,030 --> 00:03:32,950
this identifier to get hold of that

47
00:03:33,020 --> 00:03:37,820
part of our state for which this reducer is responsible.

48
00:03:37,820 --> 00:03:45,070
So in the end, a state that will look like this, like this initial state. So in category meal screen, here

49
00:03:45,070 --> 00:03:51,210
I access state.meals or whatever you chose as an identifier in combined reducers

50
00:03:51,310 --> 00:03:58,490
and then here, I'll access filtered meals. Not meals which I would also have there,

51
00:03:58,540 --> 00:04:03,380
we also have meals in here but I want to respect any filters that are set.

52
00:04:03,450 --> 00:04:06,690
Right now, we have no logic to set them but with that we'll change in the future,

53
00:04:06,760 --> 00:04:12,970
so here I want to get my filtered meals so that I always get the meals that I really should be able

54
00:04:12,970 --> 00:04:17,930
to display, the meals that respect the filters set up by the user

55
00:04:18,130 --> 00:04:25,420
and now it's the available meals which I want to filter even more here to find the meal for the category

56
00:04:25,420 --> 00:04:33,880
ID I selected or the meals for the category I selected. With that, there is no more meals uppercase in

57
00:04:33,890 --> 00:04:34,390
this file,

58
00:04:34,400 --> 00:04:39,500
that's all just lowercase here and we got rid of that import successfully,

59
00:04:39,500 --> 00:04:45,890
now let's move on. In the favorite screen, we're also importing meals and just as before, we should

60
00:04:45,890 --> 00:04:46,650
get rid of that,

61
00:04:46,670 --> 00:04:54,770
so let's do this. Instead, also just as before, I'll use use selector from React Redux to get my meals

62
00:04:54,770 --> 00:05:02,720
from the store and therefore here where I use meals, I will actually get my available meals with

63
00:05:02,720 --> 00:05:04,260
use selector.

64
00:05:04,310 --> 00:05:10,370
Again this gives me a state and I can access state.meals.filtered meals but now actually here

65
00:05:10,370 --> 00:05:11,240
for the favorites,

66
00:05:11,240 --> 00:05:16,250
I don't want to respect any filters that were set because in my opinion it makes sense that when we

67
00:05:16,250 --> 00:05:21,000
want to view our favorites, we always see all favorites.

68
00:05:21,050 --> 00:05:25,930
You could of course have a different logic and go for the filtered meals but I will use just meals here,

69
00:05:26,090 --> 00:05:28,490
so .meals.meals might look strange,

70
00:05:28,520 --> 00:05:36,950
this selects the slice of our state and then in this slice, this meals thing here accesses this meals property

71
00:05:36,950 --> 00:05:37,940
in our state slice

72
00:05:40,820 --> 00:05:46,180
but of course if you have a look at your reducer, this only partly make sense right because we have

73
00:05:46,180 --> 00:05:51,050
a favorite meals property here and indeed we do.

74
00:05:51,330 --> 00:05:58,260
So actually, we don't need to filter our favorites like this anymore and this was just a dummy filter

75
00:05:58,260 --> 00:06:04,710
anyways, it always took the meals with m1 and m2 as an ID, instead for our favorite meals,

76
00:06:04,760 --> 00:06:10,310
we can just get them by accessing here on our meals state slice favorite meals,

77
00:06:10,310 --> 00:06:16,880
so this property because we will later manage the favorited meals in a separate array in our store,

78
00:06:16,880 --> 00:06:18,280
so that's even easier here,

79
00:06:18,290 --> 00:06:23,290
very short code. So with that, we got rid of the meals import here as well,

80
00:06:23,300 --> 00:06:25,460
let's move on to the filters screen.

81
00:06:25,460 --> 00:06:27,080
There is no meals import here,

82
00:06:27,170 --> 00:06:29,840
the meal detail screen on the other hand has one.

83
00:06:29,840 --> 00:06:31,280
So here I want to get rid of it

84
00:06:31,310 --> 00:06:33,220
and now here we'll need that other

85
00:06:33,290 --> 00:06:39,800
meals property which I showed a second ago because again here, we can use use selector from React Redux

86
00:06:40,610 --> 00:06:51,720
to select our meals because in here, we now have our component here where we use our meals and there,

87
00:06:51,810 --> 00:06:59,280
I want to have an array with all meals because I'm trying to load a single meal by ID and therefore

88
00:06:59,370 --> 00:07:04,440
my basis, my array in which I look for that ID should of course be an array with all meals and not

89
00:07:04,440 --> 00:07:09,900
filtered because I don't care about any set filters, here I'm looking for a specific meal with a specific

90
00:07:09,900 --> 00:07:16,140
ID and I want to get a full list of meals and that's therefore where we will need this unfiltered meals

91
00:07:16,140 --> 00:07:17,180
list we're managing here.

92
00:07:20,140 --> 00:07:27,880
So therefore here, we can now get our available meals with use selector and there again, we use the state

93
00:07:27,880 --> 00:07:34,360
meals.meals now for real and now we can use available meals here to find the meal with that

94
00:07:34,420 --> 00:07:41,070
ID. With that, we get rid of this import here as well, we can also remove the button import now that I

95
00:07:41,070 --> 00:07:44,090
see it but we will actually have a problem.

96
00:07:44,430 --> 00:07:51,780
You might notice that in the header, I actually also try to find a meal from the meals array and we remove

97
00:07:51,780 --> 00:07:53,770
that import.

98
00:07:53,790 --> 00:07:59,010
Now the problem also is here in the navigation options, we can't use the use selector hook because you

99
00:07:59,010 --> 00:08:04,170
can only use hooks inside of other hooks or inside of functional components and this is neither of that,

100
00:08:04,170 --> 00:08:08,340
it's a normal function, not a functional component and also not a hook.

101
00:08:08,340 --> 00:08:11,870
So we can't use use selector in here so that won't work.

102
00:08:11,900 --> 00:08:17,400
Now of course we could bring back the meals import but that would be kind of cheap because in real applications,

103
00:08:17,400 --> 00:08:22,710
you will sometimes have that situation where you need data from your Redux store in your navigation

104
00:08:22,710 --> 00:08:23,160
data

105
00:08:23,190 --> 00:08:28,170
and therefore in the next lecture, we'll tackle this and make sure that we can also get access to this

106
00:08:28,170 --> 00:08:28,470
here.