WEBVTT

1
00:00:00.800 --> 00:00:04.690
Hi and welcome back to our series
on react native and redux toolkit.

2
00:00:04.720 --> 00:00:08.060
Today we're going to be talking about
one of the most important concepts in.

3
00:00:08.090 --> 00:00:11.660
Redux toolkit called combining reducers.

4
00:00:11.690 --> 00:00:16.100
In redux a reducers is a function
that updates the state of your application

5
00:00:16.130 --> 00:00:20.580
in response to an action and we
just created one in the last video.

6
00:00:20.600 --> 00:00:24.300
But as your application
grows in complexity,

7
00:00:24.330 --> 00:00:26.700
you may find yourself with many different

8
00:00:26.730 --> 00:00:29.820
reducers, each managing
its own part of the state.

9
00:00:29.850 --> 00:00:35.460
Like we could have a user reducer,
we could have a single donation reducer.

10
00:00:35.490 --> 00:00:37.860
We could have all of the donations

11
00:00:37.890 --> 00:00:42.020
reducers and it might get complicated to.

12
00:00:42.050 --> 00:00:44.580
Manage all of these so you might want

13
00:00:44.610 --> 00:00:48.100
to combine all of these
into a single root reducer.

14
00:00:48.130 --> 00:00:51.620
And combining reducers
is useful because it

15
00:00:51.650 --> 00:00:55.540
improves your code organization
and with multiple

16
00:00:55.570 --> 00:00:58.220
reducers, managing different
paths of the state

17
00:00:58.250 --> 00:01:00.300
will be easier and your code will.

18
00:01:00.330 --> 00:01:02.980
Be easier to understand and maintain.

19
00:01:03.010 --> 00:01:05.130
Also you will write more modular code.

20
00:01:05.160 --> 00:01:07.260
And by breaking down the state management

21
00:01:07.290 --> 00:01:09.887
into smaller pieces you can write more

22
00:01:10.087 --> 00:01:12.620
modular and reusable code and it offers.

23
00:01:12.650 --> 00:01:15.410
You a better scalability because as your

24
00:01:15.440 --> 00:01:16.566
application grows you

25
00:01:16.766 --> 00:01:17.800
can add new reducers

26
00:01:17.830 --> 00:01:20.321
to manage new paths of the state making

27
00:01:20.521 --> 00:01:22.620
it easier to scale your application.

28
00:01:22.650 --> 00:01:26.540
So let's use the combine reducer function

29
00:01:26.570 --> 00:01:33.140
right now let's create a new file inside
our redux folder called store JS.

30
00:01:33.170 --> 00:01:36.060
And here we're going to import combine

31
00:01:36.090 --> 00:01:40.420
reducers from redux JS toolkit actually.

32
00:01:40.450 --> 00:01:48.490
So redux JS toolkit great.

33
00:01:48.520 --> 00:01:50.900
And then we are going to import our

34
00:01:50.930 --> 00:01:53.660
individual reducers and we
only have one so far.

35
00:01:53.690 --> 00:02:03.100
So let's import user from
reducers user JS file

36
00:02:03.130 --> 00:02:09.860
and then let's create a root reducer
constant and we're going to.

37
00:02:09.890 --> 00:02:12.760
Be using combine reducers and we're going.

38
00:02:12.790 --> 00:02:15.260
To say that we're defining just one

39
00:02:15.290 --> 00:02:21.780
reducer called user and it's
going to use the user's reducer.

40
00:02:21.810 --> 00:02:25.940
And actually what we could do is
go to our user file and just

41
00:02:25.970 --> 00:02:29.100
export user reducer by default.

42
00:02:29.120 --> 00:02:30.540
And we're not going to have to

43
00:02:30.570 --> 00:02:36.140
type this for each of our
modular imports in here.

44
00:02:36.170 --> 00:02:40.660
So that's it for creating root reducer.

45
00:02:40.680 --> 00:02:42.260
And then what we're going to do.

46
00:02:42.290 --> 00:02:50.180
Is we're going to use this root reducer
to tie our reducers to our screen.

47
00:02:50.210 --> 00:02:53.820
So for that we're going to need
to configure our store and we're going

48
00:02:53.850 --> 00:02:57.420
to go over how to configure figure
our store in the next video.

49
00:02:57.440 --> 00:02:59.880
Thanks so much for watching
and see you in the next video.