WEBVTT

1
00:00:00.320 --> 00:00:01.780
Hi and welcome back.

2
00:00:01.810 --> 00:00:03.900
Today we're going to be building select

3
00:00:03.930 --> 00:00:09.940
category infinite scroll items where we're
going to include all of the categories

4
00:00:09.970 --> 00:00:12.340
that we're going to create
in our reducers.

5
00:00:12.370 --> 00:00:14.420
And as the user is going to be scrolling,

6
00:00:14.450 --> 00:00:19.620
we're going to be paginating internally
so that more new items appear.

7
00:00:19.650 --> 00:00:21.620
So for that actually we're going to be

8
00:00:21.650 --> 00:00:25.620
practicing what we constructed
together in this module.

9
00:00:25.650 --> 00:00:30.540
And you will see after all this set up how
to create a new reducer,

10
00:00:30.570 --> 00:00:35.340
put it in the combined reducers
and start using the data defined there.

11
00:00:35.370 --> 00:00:41.460
So for that we're going to need to open
up our editor

12
00:00:41.490 --> 00:00:51.300
and here we're going to create a new
reducer and let's call it Categories.js.

13
00:00:51.330 --> 00:00:59.700
So we're going to need to import create
slice from redux Toolkit

14
00:00:59.730 --> 00:01:04.050
and then we're going to be creating
a constant for our categories.

15
00:01:04.080 --> 00:01:09.800
It's going to use this create slice
with the options passed in and we're going

16
00:01:09.830 --> 00:01:18.160
to say that its name is Categories
and that it has an initial state.

17
00:01:18.880 --> 00:01:21.020
I'm going to keep defining initial state

18
00:01:21.050 --> 00:01:26.740
for a bit and then I'm going to say
that it has reducers that are going to be

19
00:01:26.770 --> 00:01:36.570
empty for now and we're going to export
categories by default and it's reducers.

20
00:01:36.600 --> 00:01:39.930
So once this is done and saved,

21
00:01:39.960 --> 00:01:44.490
we're going to create a new constant
for our initial state

22
00:01:44.520 --> 00:01:50.490
and this is going to be an object
and it will contain all of the categories

23
00:01:50.520 --> 00:01:54.380
that we're going to use and I'm
going to just paste it here.

24
00:01:54.410 --> 00:02:01.820
And then what we're going to do is we're
going to create selected category

25
00:02:01.850 --> 00:02:07.260
ID and it's just going to be by default
set to one and then we're going to use

26
00:02:07.290 --> 00:02:15.140
this initial state here
and we're going to say that we need

27
00:02:15.170 --> 00:02:25.100
a reset categories action
that will just return initial state.

28
00:02:25.130 --> 00:02:27.940
Always good practice to have a resetter.

29
00:02:27.970 --> 00:02:31.100
And we're also going to need update

30
00:02:31.130 --> 00:02:33.814
selected category ID

31
00:02:34.014 --> 00:02:38.780
and it wants to take state and action

32
00:02:38.810 --> 00:02:41.753
and we're going to say that taste

33
00:02:41.953 --> 00:02:45.320
select category ID is whatever we passed

34
00:02:45.350 --> 00:02:50.440
in to this function
and we're going to need this because users

35
00:02:50.470 --> 00:02:54.460
are going to be able to click
on the items and activate them.

36
00:02:54.490 --> 00:03:00.300
And it would be great to keep track
of the selected items in the store here.

37
00:03:00.330 --> 00:03:04.860
So then we're going to need
to export these actions.

38
00:03:04.890 --> 00:03:08.740
So let's create export const and copy

39
00:03:08.770 --> 00:03:13.380
these here so that we're able to use it
from our components and we're going to say

40
00:03:13.410 --> 00:03:19.260
that this is equal to Categories actions
and then we're going to use this

41
00:03:19.290 --> 00:03:28.100
categories reducer here in the store so
that we are actually able to use it.

42
00:03:28.130 --> 00:03:36.200
So we need to import this and let's just
copy this line and create one categories.

43
00:03:36.680 --> 00:03:37.700
Great.

44
00:03:37.730 --> 00:03:40.500
And now if we go to our home screen

45
00:03:40.530 --> 00:03:44.240
and we create a categories

46
00:03:44.760 --> 00:03:51.920
selector here and we say state.categories

47
00:03:52.680 --> 00:03:58.480
console log the value of the categories,
we should be able to state.

48
00:03:58.800 --> 00:04:00.260
Let's reload it.

49
00:04:00.290 --> 00:04:02.820
Yes, it's here.
That's great.

50
00:04:02.850 --> 00:04:07.740
So it's available for us
to use for our flatlist.

51
00:04:07.760 --> 00:04:08.900
However, in this video,

52
00:04:08.930 --> 00:04:12.380
since we did the setup,
I don't want to make this video too long.

53
00:04:12.410 --> 00:04:14.940
So if you want to set up the categories

54
00:04:14.970 --> 00:04:18.820
with me, please come back to the next
video and I'll see you there.

55
00:04:18.840 --> 00:04:19.800
Thanks so much for watching.