All right, let's take care of part two of making sure that we communicate some type information over
to react redux, once again, we're going to be essentially doing what it says inside the official documentation
to apply some type stuff.
So a lot of this code is going to be kind of confusing, kind of weird, going to feel a little bit
awkward.
But again, it's just kind of what we have to write out.
So to get started inside my hoax directory, I'm going to make a new file called Use Typed Selecter
Thoughts.
Then inside of here, we are going to import.
Use selector.
And.
Height use selector, OK?
From React Redux.
I'm also going to import.
That route state type that we just put together moments ago from up one directory state.
And then finally, I'm going to export const.
Use tight selector.
I'm going to put on a type connotation to it of tight use selector hook angle brackets.
Route state equals.
Use selector.
Yeah, I it just feels awkward.
I'm pretty convinced there's a better way to do this, but this is what the documentation says, and
in general, I like to kind of stick with the documentation now rather than ever using use selector
to try to get some state out of our store.
We're going to instead use this thing called Use Typed Selector.
Its name is just meant to imply that, well, this has some type information applied to it.
We do not really have to call this use type selector.
We could call it use selector and then just import this thing up here as something else.
If you don't like having to and use type selector, that's personally what I do.
I personally rename U selector to just something like as underscore U selector.
And then use that over here and now I can call the thing that I export use selector.
So now I don't even really have to worry about the fact that I'm using use type selector, because that's
just kind of an awkward name.
So if you want to do this, totally fine.
But again, documentation is going to say something closer to what I had to start with, something like
this right here.
OK, so now we're going to go back over to our component, and instead of making use of use selector,
we're going to use use type selector.
Tobacco over inside of our components, I'm going to delete the import for you selector and instead
get use typed selector.
From Hooke's use type selector.
And then I'll use that thing in place of you selecter right here.
It's now somewhat magically, if I hover overstates it correctly describes or is annotated as the type
of state inside of our reduc store.
So it's something that has a repositories key that points at some object that satisfies the interface
of repositories state.
Now, I can very easily take a look at state DOT repositories, return that entire object and then structure
out of it data error and loading.
And if you mouseover data and loading, you'll notice that they all have the correct type annotations
on them.
So data is an array of strings.
There is string or null and loading is a boolean.
So that's it again, I know this like this video and the last one, I really wish that I could make
a little bit more compelling and wish I could better explain what's going on.
But there's kind of not a lot to say beyond.
Well, this is what we've got to do to communicate some type information over.
So I apologize for kind of whining about this a little bit, but it's just kind of a sore spot for me
just because, again, I feel like some of these libraries kind of make typescript integration just
a little bit unnecessarily difficult.
But that's just life is just what we have to deal with in the JavaScript world.
Anyways, back on topic.
So last thing I have to do is make use of data er and loading inside this component.
Let's take care of that in just a moment.