We need to get access to some state that is stored instead of our reduc store inside of our repositories
list component to do so, we're going to use another hook from the reactor redox library at the very
top.
I will import use selector from REACT Redux.
This hook is similar in nature to the map, state to proper function that you might be used to if you
have ever made use of Class-Based components before.
So as a very quick example of how we use this hook, we could write out inside of your state is use
selecter.
I'm then going to call that with a function that is going to receive all the state out of our reduc
store and I'm going to call that simply state and then going to immediately return it from that function.
After that, I will then do a log of whatever we get back.
So let's just run this and see exactly what happens.
I'm going to do a quick refresh and I will immediately see a counsellor.
OK, so this is all the state that isn't outside of our store and of course, has the repositories key
and there's the output from our repositories reducer.
So we have no data original loading of false.
I'm going to try to search for react, so I'll type and react, I'm going to clear my console and do
a search.
Here's my council blog.
I'm going to take a look at the last entry right there, and now I can see my data property has a list
of 20 different packages that we can print up onto the screen.
Naturally, we probably don't want to get this entire repositories piece of state.
We probably just want some individual pieces.
So in other words, inside of our component itself, we don't need this entire design object.
We really just need these pieces of state just loading.
Just air and just data.
So to make sure that we only get those very small pieces of state that we really care about, we can
select some piece of state.
That's what this function right here is really all about.
This function is going to receive our entire state object out of redux.
Then whatever we return from here is what we're going to eventually get out on the other side.
So, again, you can really think of this as being very similar to the map state to function.
So in our case, all we really care about is state dot repositories.
That's it.
We don't really care about anything else.
But as soon as we add that in, unfortunately, we get a little error message.
So what's going on here?
Well, for just a moment, I'm going to first annotate State as any I just want to make sure that this
code works and we'll start to approach the typescript side of things.
So I'm going to say this now.
Back over now, if I refresh, I will see that now we are only getting that repositories piece of state.
So just loading air and data.
It's now just really quickly, we can structure out data air and loading and then eventually make use
of those different properties inside of our component.
But before we do so, we probably, of course, want to understand why are we seeing an error message
whenever we try to reference repositories?
Well, I'm going to remove that type imitation of any really quickly and then we'll take a look at the
error message again.
So I'm going to hover over repositories and you'll notice that says property repositories does not exist
on type default route state.
So this right here is a little bit of a pain point around using the React Redux library whenever you
make use of use selector.
You selecter really has no idea whatsoever about what type of data is inside of your reduc store.
No information right now is being communicated to TypeScript from our kind of redock side of things
over to this react redux side of things.
So you and I have to write in a little bit of additional code to help react redux, understand what
type of data or really what type this argument is right here.
This extra little bit of code is just a little bit frustrating to have to write because it's a little
confusing exactly what we have to do.
And it kind of feels like something that should be kind of done behind the scenes automatically.
Unfortunately, automating this process would be really challenging.
So this is why you and I have to write out just a little bit of additional code to get everything working
as expected.
So let's take a pause right here.
Come back the next video.
We're going to write out this additional little bit of code and really understand what it is doing behind
the scenes.