You and I know very well because we've done a ton of design work and we wrote out the code for it and
we just saw a console a moment ago, we know really well the structure of data inside of our Redock
store.
We know that our state is an object that has a repositories key that points out another object that
has a data loading and air property.
Again, we just saw council logs of this.
However, unfortunately, React Redux is not aware of this information.
It doesn't know about the type of data inside of our store.
And that is why if we take a look at our hook of you, select a right here and we mouse over state's
default route state that being applied as the default type of state really can be interpreted as meaning
react Redux has no idea what the type of data is inside of our Redock store.
That's what this really means right here.
So in this video, we're going to do a little bit of work to first programmatically figure out what
the type of our data is inside of our Reduc store.
We're then going to communicate that information over to react redux.
Now, a lot of the code that we're going to write in this video is probably going to be just a little
bit frustrating.
I'll be honest with you.
Just about everything that we are going to write is coming straight from the React Redux documentation,
so I'm at React Redux documentation for it.
I'm inside of these static typing section and there's some directions inside of here on how you can
get react redux working really nicely with TypeScript.
The reason I say that this stuff is frustrating is that sometimes react redux, redux and redux, Thunk
and several other redux related libraries just kind of feel like they don't work that well with type
scripts, which I personally find just a little bit frustrating.
But that's life.
All I mean to say here is we're pretty much following the documentation.
And if what we were about to write feels weird or strange, well, unfortunately, it's just because
this is how I react.
Redux is set up.
It's life.
So let's just deal with it.
Long story short.
OK, so the first thing we have to do is create a new type that describes the type of data inside of
our reduc store.
That's what we're about to do.
So for that, we're going to go into our state reducers index dots file.
Remember, we call combined reducers right here.
This means or really this entire statement means that our state inside of a reduc store is going to
be an object that has a repository, repositories key.
And the value for that is going to come from our repositories, reducer repositories reducer is a function
you and I put together and we applied a return type invitation to it of Repository State.
So TypeScript is 100 percent aware of exactly what is coming out of that reducer.
TypeScript is also 100 percent aware that the overall state coming or being stored inside of our store
redock store is going to pretty much look like this right here.
So we're going to kind of codify that.
We're going to create a new type that very accurately just says here is the type of data inside of a
reduc store.
For that, at the very bottom of this file, I'm going to export a type called Route St..
And we're going to assign this type return type angle brackets type of reducers.
So this is where, like I said, we have to write out a little bit of code that's kind of like, is
this really the best way to do this?
Is it kind of feels a bit strange.
But again, it's just kind of what we have to deal with.
The way we pretty much interpret this is is kind of saying, OK, we're creating some reducers thing
right here.
This is going to be a function.
Whenever we call that function, it's going to internally call some of our different reducers, give
us back some object that has a structure that kind of looks like this right here.
So we are making use of a built in helper inside of typescript to say, take this function and give
us back the type of whatever that function returns.
We're then going to assign that type to Route States Snappily Mouse over Route St. We'll see that it
accurately describes the type of data that's going to be inside of our store.
We're going to have an object that has a repositories key.
And the value for that is going to match the interface or satisfy the interface of repositories state.
So, again, we now have a type that describes the type of information inside of our store, I know
I've repeated that several times, but don't make sure that is crystal clear.
So we are now going to make sure that we export this from our entire state directory.
Remember, we've been trying to kind of centralize all of our exports.
It's going to go into our inducts file inside the state directory.
And I'm going to export star from.
Reducers.
OK, so let's kind of step one.
So let's take a pause right here.
We're going to come back to the next video.
Now that we've got this type, we're going to use it to kind of better describe what we are getting
out of use.
Selector back over here.