All language subtitles for 010 Using Redux Data in React Components_en

Let's say we wanna utilize

this provided store not in the app component

but in the counter component which I rendered there.

That's this counter component in the components folder.

We got more components there we'll use them later

for the moment it's the counter component

that matters to us.

Now that's the component you're seeing on the screen here

when you're running your Def server.

It shows us basically a container

where we wanna output the counter value.

We got a toggle counter button for hiding

or showing the counter.

Now here I wanna start by outputting the current counter.

And for this we need to get access to our Redux store

and to the data in there.

And we again do that with help off the React Redux Library.

So from React Redux we again wanna import something

and the something which we are importing is a React Hook.

A custom hook made by the React Redux team.

The use selector hook.

There also is use store hook, which we could use as well

which gives us direct access to the store

but you as selector is a bit more convenient to use

because that allows us to then automatically select a part

of our state managed by the store.

So I will use use selector here.

Now if we would be using a class-based component

and not a functional component as we are here

and as we are in the majority of the course,

then there also is a connect function

which we could use instead.

This function can be used as a wrapper

around our class component to connect that class component

to the store.

I'll come back to that later for the moment

we'll focus on use selector.

So here in this functional component we can now get access

to the data managed in our store by using use selector.

We call this and now we need to pass a function

to use selector.

A function which will be executed by a React Redux

of function which then basically determines which piece

of data we wanna extract from our store.

Of course at the moment we have a very simple state.

Just an object with a counter property.

But in bigger applications,

you will have more complex states with tons

of different properties maybe nested objects and arrays

and therefore being able to just get a slice

just a tiny part of that overall state object

in a easy way is worth a lot.

And that's what use selector allows us to do.

For this we should pass a function to it,

a function of which we'll receive the state managed

by Redux and then we return the part of the state

which you wanna extract.

So here for example, state stock.counter.

Again this function will be executed for us by React Redux.

It will then pass the Redux state

so the manage the data into this function

when it executes it and then basically executes

this code to retrieve the part of the state

which you need in this component.

And then use select or therefore overall gives us

that returned value.

So we get a counter constant

which is the counter managed by Redux.

Now the great thing is that when you use use selector,

React Redux will automatically set up a subscription

to the Redux store for this component.

So your component will be updated

and will receive the latest counter automatically

whenever that data changes in the Redux store.

So it's an automatically reactive

and changes to the Redux store will cause

this component function to be re executed.

So you always have the latest counter.

That's why use selector is a very useful hook

and why it is the hook we use for getting data

out of the store.

If you ever would unmount this component

if it would be removed from the DOM for whatever reason,

React Redux would also automatically clear

the subscription for you.

So it manages that subscription for you behind the scenes.

Now that we got this counter, we can use it down there,

to output the counter value like this.

And if we now save this, we therefore now see zero here.

And that's how we can get access to data managed by Redux.

Of course the question now is how we can change that data?

How can we dispatch actions?