The first reducer we are going to put together is our cells reducer to remember there are going to be
a couple of different properties that are managed by this reducer.
First, we're going to have a data property.
This will be an object where all the keys are the IDs of cells and the values will be the actual cell
itself for that respective ID.
We're going to have loading that we're only really going to use once we start fetching information about
these different cells from an outside API air.
Same thing going to be related to error messages coming from some outside API and an order which will
be an array of strings is going to tell us the exact order of different cells and how we should render
them on the screen.
So let's go and create this new reducer.
Back inside of my editor, I will find the cells reducer file at the very top, I will immediately import
action type.
From up on directory action type's.
And action from actions.
Then inside of here, remember, we're going to take the exact same approach as what we did back on
our redux example a little bit ago, we're going to first define an interface that describes the exact
structure or the exact output of this reducer.
We're also going to define our initial states and then define the reducer itself.
So first, I might create an interface called maybe cels.
I personally, I really don't like when I get those repeat S's, so cells state having something like
cell state just makes a lot more sense.
But we've kind of already set ourselves up with the name of the seducer.
We are calling it cells reducer.
So I'm going to call it cells state.
If you don't like that, if you want to call it cell state, totally fine.
Just make sure you rename this interface in all appropriate locations.
So then inside of here, exactly what we just saw on our diagram, we're going to have loading air order
and data.
It's going to have loading.
Er, that will be either a string or null if there is no er will have order, which will be an array
of strings that's going to be the ID of each cell in some very particular order.
And then finally, detA.
For data, we want to say that this is going to be an object where the keys are the IDs of individual
cells and the values are the cells themselves.
That sounds crazy, the cells themselves, whatever, to say that this is going to be an object with
a couple of different keys and values inside of it, we're going to put in brackets key.
Bohlin string.
Then for a value, we want to say that this is going to be some value of type sell and remember, we
are just to find an interface describing exactly what a cell is.
A moment ago, we had placed that into our cell file.
So I'm going to import that cell interface into my producer.
OK, that looks good.
Next up, I'm going to define some initial state for my producer.
So I'll do initial state.
I'm going to annotate this thing as type cells state just to make sure that I define the object with
all the appropriate values and whatnot.
So we'll start off with a loading of false because by default, when our application first loads up,
we are not loading any data, our air will start as null because, well, we don't have any air just
yet.
Our order will be an empty array because we do not have any cells.
And for data, as you probably guessed, we can have an empty object because again, we do not have
any cells.
All right, so it looks reasonable.
Next up, we'll define producer.
Our reducer is going to take arguments of state and action.
For states, we will immediately annotated Stip to make sure that we never tried to access some property
on state that doesn't actually exist.
So I'm going to say that the type of states should be cels.
State and I'll default its initial value to be initial state.
Next up for action, action is going to be any of a number of different types, all described by our
action type that we already imported at the very top.
Remember this action thing right here that's technically kind of like the union of all different types.
It's saying here are all the different possible types that we're ever going to receive.
So I'm going to annotate action as action.
And then this is technically optional, but I am going to add it in, I'm going to annotate this function
and say that it's going to eventually return a value that satisfies the interface cell state as well.
So this will make sure that in all possible scenarios, we always return an object that has the correct
structure.
All right, I'm going to say this is going to wrap everything around, but I technically still have
exactly the same code, we're going to immediately get an air around cell state right here.
That's just because we are not returning anything from our function right now.
If we do return state, we are now, in theory, returning an object that satisfies the cell state interface.
So that error message should I made a typo there.
Here.
It's already happening.
I put in cell state.
It is cells state.
And that's why I don't really like having that trailing in there.
It just kind of gets lost.
The ones I put in return state and the correct interface, the error message goes away.
The last thing I want to do is export default, this reducer at the bottom.
OK, so this looks good.
Good place to get started.
Let's take a pause right here.
We'll come back to the next video and start adding in a little bit more setup to our producer and eventually
create our reduc store, create the store, export it, go through all those steps.