Let's go back over to our producer.
We need to add in a couple of different cases to handle each of these different types.
So back inside of my reducers cells reducer file.
I'm going to scroll down to my producer and I'm going to add on my three different cases so we will
do a case of action type dot that sells.
Action type dot fetch sells complete.
And finally, vetch sells air.
In each of these, remember, we've said it so many times now, we are making use of IMR nonetheless
just to make TypeScript happy, we still have to return our state object.
So in every case, I'm going to return state after we do some direct mutation to it.
I'll put it in those return statements right away just to make sure we don't get any typescript errors.
Now we can go through and start to update our state in each of these different cases.
First off, let's take care of cells.
As I've said many times in this case, all we really want to do here is flip the loading flag over to
true.
One thing we might also do here is set air to no just in case there was some kind of error with our
previous attempt to fetch a list of cells.
So inside of cells, action type right here will do state loading to true.
And state dot heir to know.
Let's then take care of the other very easy one very quickly, so would fetch sells er.
In this case, we're going to say, well, we just got some air during the loading process, so chances
are we're not loading anymore, so let's change that to false.
And our air will now be action payload.
Remember, we just put together that action crater and our action, not payload property in this case
is going to be a string describing what just went wrong.
So then finally sells complete now, as I mentioned, this one is going to be just a little bit more
complicated.
We need to take our array of cell objects and use that to define both our order array and the data object
as well.
So for that, let's first take care of the order rate, because that one is by far the easiest, we'll
say state court order will be action payload and right away, if we mouseover that, remember, I just
want to give you the reminder once again, this is an array of cell objects, so we are going to map
over that array.
And for every cell we're going to return, it's Eid.
And so that should give us every cell's ID in the correct order.
Next up after that, we'll start to populate our data object as well.
So in this case, we'll do a state dot data.
And again, just a little bit of confusing logic here.
We're going to use the reduce function in this case.
You might remember that the reduced function is somewhat similar to MAP, but rather than iterating
over every single element inside of an array and returning a new array, we're going to instead iterate
over every element and we're going to add in some new data to some kind of new number or string or object
or array or something like that.
Let's just write out the code.
So action payload we're going to reduce.
We're going to take every cell.
For every cell, I'm also going to first argument here should be our accumulator object, so that's
the thing that we're kind of reducing down to.
We're going to add in at accumulator cell ID.
We're going to set that equal to Zel.
And then we'll provide the initial value for our accumulator object, which will be an object.
We're going to very quickly get a nasty air from typescript typescript is really not on board with all
of this.
So to fix this up, we can put in once again to so many little tricks inside this course.
Just one more little trick.
You're going to tell TypeScript what kind of object this is.
I'm going to tell TypeScript that that object is the same type as Arcel state data property.
So we're going to say, as does state at data like so.
Now, we might get an error message here, lesson we have to do is just return the accumulator.
And now everything is working.
OK, so this looks pretty good.
I know the reducer or the reduce function just a little bit nasty is going to assume you've got all
that prior knowledge around how reduce works.
Well, I'd say overall, everything is looking pretty good from the standpoint of fetching cells.
Now all we have to do is repeat this entire process, but don't worry, it'll be much faster.
We're going to repeat the entire process for saving a list of cells as well.
So let's take care of that in just a moment.