Hi and welcome back.
Today we're going to be building select
category infinite scroll items where we're going to include all of the categories
that we're going to create in our reducers.
And as the user is going to be scrolling,
we're going to be paginating internally so that more new items appear.
So for that actually we're going to be
practicing what we constructed together in this module.
And you will see after all this set up how to create a new reducer,
put it in the combined reducers and start using the data defined there.
So for that we're going to need to open up our editor
and here we're going to create a new reducer and let's call it Categories.js.
So we're going to need to import create slice from redux Toolkit
and then we're going to be creating a constant for our categories.
It's going to use this create slice with the options passed in and we're going
to say that its name is Categories and that it has an initial state.
I'm going to keep defining initial state
for a bit and then I'm going to say that it has reducers that are going to be
empty for now and we're going to export categories by default and it's reducers.
So once this is done and saved,
we're going to create a new constant for our initial state
and this is going to be an object and it will contain all of the categories
that we're going to use and I'm going to just paste it here.
And then what we're going to do is we're going to create selected category
ID and it's just going to be by default set to one and then we're going to use
this initial state here and we're going to say that we need
a reset categories action that will just return initial state.
Always good practice to have a resetter.
And we're also going to need update
selected category ID
and it wants to take state and action
and we're going to say that taste
select category ID is whatever we passed
in to this function and we're going to need this because users
are going to be able to click on the items and activate them.
And it would be great to keep track of the selected items in the store here.
So then we're going to need to export these actions.
So let's create export const and copy
these here so that we're able to use it from our components and we're going to say
that this is equal to Categories actions and then we're going to use this
categories reducer here in the store so that we are actually able to use it.
So we need to import this and let's just copy this line and create one categories.
Great.
And now if we go to our home screen
and we create a categories
selector here and we say state.categories
console log the value of the categories, we should be able to state.
Let's reload it.
Yes, it's here. That's great.
So it's available for us to use for our flatlist.
However, in this video,
since we did the setup, I don't want to make this video too long.
So if you want to set up the categories
with me, please come back to the next video and I'll see you there.
Thanks so much for watching.