WEBVTT

1
00:00:00.720 --> 00:00:04.850
Hi and welcome back to our series
on react native and redux Toolkit.

2
00:00:04.880 --> 00:00:06.610
Today we're going to be talking about how

3
00:00:06.640 --> 00:00:11.220
to configure the store using the combined
reducers that we created in the last video.

4
00:00:11.240 --> 00:00:12.620
So for this, what we're going to have

5
00:00:12.650 --> 00:00:17.080
to do is import configure

6
00:00:17.960 --> 00:00:24.340
store from Redux JS toolkit.

7
00:00:24.370 --> 00:00:26.860
And then below our root reducer,

8
00:00:26.890 --> 00:00:31.900
we're going to create another constant
and we're going to call it store.

9
00:00:31.920 --> 00:00:33.740
And we're going to use this configure

10
00:00:33.770 --> 00:00:40.820
store function
to provide our root reducer.

11
00:00:40.850 --> 00:00:50.600
And then what we're going to do is we're
going to export this tor by default.

12
00:00:50.760 --> 00:00:55.220
And I just want to explain what
the configure store function is.

13
00:00:55.240 --> 00:00:56.900
The configure state function takes

14
00:00:56.930 --> 00:01:00.500
an object as an argument where you can
specify the initial state of your

15
00:01:00.530 --> 00:01:04.980
application as well as any middleware
and enhancers that you want to use

16
00:01:05.010 --> 00:01:09.770
and in this example we're just specifying
the combine reducers as the only required

17
00:01:09.800 --> 00:01:15.740
option and we're providing it the root
reducers that we created here.

18
00:01:15.770 --> 00:01:19.980
Now, if you want to use your reducer,
you can certainly do so.

19
00:01:20.010 --> 00:01:22.380
For this, all you need to do is go

20
00:01:22.410 --> 00:01:28.820
to App JS file here
App TSX file for me, actually.

21
00:01:28.850 --> 00:01:36.620
And we're just going to import
provider from React Redux.

22
00:01:36.650 --> 00:01:38.900
And then we're going to place all of our

23
00:01:38.930 --> 00:01:44.340
code inside this provider so that we
can provide the values of our store.

24
00:01:44.370 --> 00:01:46.100
And we're just going to say store.

25
00:01:46.130 --> 00:01:53.490
And we're going to give it the store that
we just exported from our store JS file.

26
00:01:53.520 --> 00:01:58.780
And let's put all of our
code inside this provider.

27
00:01:58.810 --> 00:02:00.900
And now we have access to the store.

28
00:02:00.930 --> 00:02:06.340
So if we just go to our home screen,
for example, and inside here we use

29
00:02:06.370 --> 00:02:12.660
a header component that we defined
from our components.

30
00:02:12.680 --> 00:02:14.260
Now we know that we need to give it

31
00:02:14.290 --> 00:02:21.780
a title and let's just give it a title of
not for now let's save this and make sure

32
00:02:21.810 --> 00:02:26.450
that it displays on our
simulator and it does.

33
00:02:26.480 --> 00:02:31.940
And if we want to tie
our header to the reducer that we created

34
00:02:31.970 --> 00:02:36.730
here we're going to have to use
something called useselector.

35
00:02:36.760 --> 00:02:39.780
So let's import that from React redux.

36
00:02:39.810 --> 00:02:46.240
Let's create a selector called user
and we're going to use useselector to get

37
00:02:46.270 --> 00:02:51.020
the state of our app and the specific
one that we want to get is user.

38
00:02:51.050 --> 00:02:54.940
We could get the user's information using

39
00:02:54.970 --> 00:02:58.060
user first name and last
name and all of that.

40
00:02:58.090 --> 00:03:05.260
But let's just get the whole object here
and if we console log user here go to our

41
00:03:05.290 --> 00:03:13.220
terminal, we're going to see everything
that we defined in our reducer in here

42
00:03:13.250 --> 00:03:15.540
which means that it is ready for us

43
00:03:15.570 --> 00:03:20.860
to be use anytime in any component,
whether it is header inside the header

44
00:03:20.890 --> 00:03:26.220
component, whether it is inside other
components like badges, tabs, whatever.

45
00:03:26.250 --> 00:03:28.820
You can use selector anywhere and grab

46
00:03:28.850 --> 00:03:31.580
the state from your
reducers anytime you want.

47
00:03:31.610 --> 00:03:35.780
So instead of Nata,
here what I'm going to do is use our

48
00:03:35.810 --> 00:03:41.300
selector and I'm going to say user
first name plus user last name.

49
00:03:41.320 --> 00:03:42.740
That's what I want this to show.

50
00:03:42.770 --> 00:03:44.020
I'm going to save it.

51
00:03:44.050 --> 00:03:47.580
And here we're going to see Nata
Vacheishvili appear here.

52
00:03:47.610 --> 00:03:52.260
It would be better if I had
space in between and great.

53
00:03:52.290 --> 00:03:55.980
This is how you configure your store

54
00:03:56.010 --> 00:04:01.740
and then make it
provide all of the values from your store

55
00:04:01.770 --> 00:04:04.940
to your screens or any
components that you want.

56
00:04:04.960 --> 00:04:06.220
Thanks so much for watching.

57
00:04:06.240 --> 00:04:07.320
I'll see you in the next video.