We have put together all of our different action graders, or at least the synchronous ones, remember,
we're going to eventually come back and handle cells and a little bit and we're going to move on and
start to work on our cells reducer.
Back inside of my code editor, Ed, I will find the cells reducers its file inside of here.
We had already put together a lot of initial scaffolding.
We've got all of our four different cases outlined right here.
We just have to go back through and add in some implementation.
The first one we'll work on is update cell to remember update so we can look at what we are going to
get as a payload by going back over to our action creature file and finding updates.
Cell.
Where is it?
Right here, so whenever we get an action of type update Zel, we'll get a payload that has ID and content.
So all we have to do is find the appropriate cell and update its contents inside of our state object.
Now, quick note on our state object for the cells reducer in particular.
Remember, we had said that we would have a data property managed by this reducer, but we didn't really
go into a lot of detail about what this data property was going to look like.
So I've kind of annotated its type on this little diagram right here.
So our data property is going to be an object.
The IDs or the keys of this object are going to be the IDs of each of our different cells.
And then the value for each will be another object.
That is the actual cell itself.
So the reason that we are storing these things in an object is to just be able to look them up in the
future very easily by just using an ID.
Another way we could have stored these cells was inside of a big array.
Like, so so we could have just had an array of small objects, but if we did that any time we wanted
to find a particular cell, we would have to do a find statement inside there and try to find the appropriate
cell, which would just be an extra little bit of code.
So life is going to be a little bit easier if we just store these things inside of an object.
So just as a very quick example, you don't have to write out this code.
This is just a very quick example to help you understand what our state is going to look like.
We're going to have loading.
It will be true or false.
Right now, it's always going be false.
We're going to have our air.
It will probably be no.
We'll have data which will be an object, the keys are going to be an identifier for each particular
cell, so maybe something like that, and then the value will be a cell object.
Remember, we already said exactly what a cell object is going to look like.
We defined what a cell object was going to be inside of our cell DOT's file.
So we had set up this interface right here.
So these cell objects are going to have this structure.
So we're going to have.
Again, just as a very quick example, an ID of that same thing, a type of either text or code, maybe
in this case it's code and then content.
Which will be whatever code a user wrote in to the code editor, so maybe something like const A equals
one or something similar.
Then inside of our data object, we might have many of these different cells, so the next one might
have a totally different ID.
It might be type text and its content might be some kind of documentation for this thing.
So when we start to talk about making an update to a cell, we need to go into that data property,
we need to find the appropriate cell by looking up its ID.
We're then going to update its content property, and that's pretty much it.
That's all we really have to do here.
OK, so now we've got a better idea of what's going on, let's do some implementation.
So for updates, so instead of just returning state, I'm going to return a new object that has all
the existing properties of St..
And then going to refine or redefine the data property or of the yes, the data property, that's what
we called it.
The new value for the data property is going to be a new object.
That has all the existing cells out of the state data property, so we're going to take all those existing
cells out of that object and throw them inside of here.
And the one exception is that we're going to overwrite whatever is at action, not payload.
So we're going to override that cell.
The new value for that particular cell and I'm going to give myself just a little bit of space here.
It's a new value at that point will be and it's going to be a little bit long, this statement right
here, state dot data at action payload ID.
So that's going to be the actual cell itself.
We're going to extract all the properties from that and add it into a new object.
And then we're going to overwrite its data proper content proper.
Excuse me, I'm going to give myself just a little bit of space.
We're going to say you are going to have a new content property and the value for that new content property
will come from action, not payload, not content.
All right, that's it.
Now, remember, all this really confusing stuff inside of here is because whenever working with Redox,
if we're making a change, we don't want to directly modify our state object.
Instead, we want to return a brand new object.
So this is just one way of writing that out.
We don't technically have to be this kind of verbose and all of it, but this definitely is going to
work out just fine.
One thing we might do to kind of make this a little bit easier to read is to do structure off the idea
of the cell we want to update and the content ahead of time because then we won't have to write out
action, not payload, in these three separate locations.
So inside of our case right here, we could pull off just ID and content from action payload.
And then inside of our square brackets, we can reduce that to just idee.
Inside of these square brackets, we can also reduce it to IDX.
And then finally for the update, instead of writing out content is action pela content, it can be
just content like so.
OK, so there is our first case put together, well, now we've got this done, let's take a quick pause
right here.
I can just about guarantee you that some of these other ones are going to be a little bit more straightforward
in nature.
But we'll take care of those in just a moment.