We're going to test out our reducer in just a moment, but first, I want to go over a quick little
side issue.
So in the last couple of videos, you might recall that I told you several times, oh, yeah, we don't
have to return our state object anymore from inside of our reducer because IMR is just going to automatically
take care of everything.
It's going to find all the changes we made towards the object, and that's pretty much that.
So that's absolutely true.
IMR is going to take a look at our state object, see what changes we made to it, and then automatically
take care of providing Redox with our updated state object.
However, there is a big Gocha here, and the reason that I want to go over this entire topic instead
of a separate video is because if you just follow exactly what the IMR documentation says, which is
pretty much what we did, you're going to very quickly run into a little issue with TypeScript.
So let me show you a little problem that we have inside of our application right now because of how
we have set up our producer.
I'm going to go back over to my Staats file inside my state directory.
So as a quick reminder, we are creating our store inside of here.
A second quick reminder, I want to give you as if you ever want to manually get all the estate out
of your store, you can call Staat, get state.
So I'm going to assign that call to a variable I'm going to call state for just a moment and then go
into mouseover state and we're going to take a look at the type of data that is returned from that gets
date call.
I want you to see something really clearly here.
This is saying that we are returning or the state variable is going to be some kind of object that has
a cels.
Property sales is going to be of type either sell state or some object that has all these properties.
If we keep on scrolling down a little bit, however, you'll notice that there's a little case down
here that says or undefined.
So it means that our state variable right there is going to be an object that has a sales property that
conforms to either the cells state interface or it is going to be undefined.
That means that if we ever tried to access state dot cells, dot, say, maybe data or air or loading
any of these different properties, we're going to very quickly see an error message.
And that's because states cells might possibly be undefined in such script, wants us to handle that
case.
So why would TypeScript think that state dot cells might be undefined?
Well, again, it all comes back to how we just put together a producer reducer script has taken a look
at the reducer we put together.
And because there are some cases where we return undefined or nothing at all, TypeScript is saying,
oh, well, whenever this reducer is called, it's going to either return something that satisfies the
cells state interface or undefined.
And that's the whole issue, because we are returning nothing in these cases, TypeScript, is incorrectly
thinking that state cells might sometimes be undefined.
And so to handle this, we would have to write in a lot of extra code to our project to say, hey,
let's try to make sure that sales actually is defined and that we actually have some piece of state
there.
Well, that's one solution.
But the other solution is to just go that extra little mile and for every single return statement,
go ahead and do the return state anyways, even though it is not strictly necessary.
So inside of our producer, we're going to find all of our different return statements and we are going
to add in return state after all.
So here's a case one.
Case two, I got my return state, case three, I'm going to go into the statement and add in return
state.
There's another return right there, all that in return state.
And then finally, we've got the last two done here.
Did leave on the return state, so I should now be able to do a search inside this file or return.
And besides, inside a random idea right there.
Of course, all other return statements should be returning state.
And I can definitely confirm that.
Now, if I go back over to my Staats file, I'm no longer getting an air from state dot cells because
now TypeScript is correctly seeing that in all cases we are in fact returning some state object.
Now, again, this is not strictly necessary per say.
Our entire application would work just fine if we ran it in the browser without going or returning that
Steet object, because IMR is going to automatically find all those changes, make the state updates
itself, and then return a state object for us.
So this is just an extra little step to make TypeScript happy.
And that's it.
Nothing else.
The whole reason I just wanted to go over this in great detail and I wanted to kind of show you what
the IMR documentation says, which is that you don't technically have to return.
State object is, again, just because the documentation says that, because if you just go and read
the documentation, you might get tricked into thinking, oh, we don't need to return anything from
our reducers.
Well, you technically don't.
But again, to make TypeScript happy.
You do.
So just to kind of show you the stuff in action, if you go back over to the Murdochs, all these different
mutation things, these notes we've looked at again, in all cases, they never showed returning anything.
You'll also see on the left hand side, there's an example reducer over here.
And if you scroll down to the IMR example, again, they are not returning anything in this case either.
But of course, in this case, they're using plain JavaScript, not typescript.
So this would absolutely work.
OK, with JavaScript you would technically work on with TypeScript as well.
But again, to make TypeScript happy, we do have to return our state object.
OK, so that's it.
Just want to go over that little gotcha that you might run into as soon as you start making use of IMR.
So now that we've made these updates, I'm going to go back over to my Staats file.
I'm going to clean up everything inside there, those two lines of code I just added.
So let's take another pause right now.
And as I mentioned, we're going to try to do a little bit of manual testing of our retexture.
Just make sure everything is working as expected in the next video.