All language subtitles for 012 Redux with Class-based Components_en

Now, even though

it's not the focus of this course

because it's not the common way of writing components,

I wanna briefly talk about class-based components

instead of functional components.

Because whilst nowadays

we typically do use functional components only,

there still are a lot of projects out there

that do use class-based components instead.

And there of course also are simply people who prefer that,

and there is nothing wrong with class-based components.

Therefore, I also wanna show you

how this counter component would look like

if we would build it as a class-based component.

For this, I'll add a class named counter here,

and that class needs to extend the react component object,

the react component class.

So I'll import from react, I will import components,

whoops, component like this.

And with that imported here we extend component.

Now, that's what you learned

in a separate module about class-based components.

That's how they work.

Now, in here, we then can add a constructor

to initialize our state, but here we don't have any state.

Instead here, we then add the render method,

which should of course return this JS X code.

So I'll copy that and return this JS X code here.

But now we need to add increment

and decrement handler methods,

a toggle counter handler method,

even though we're not doing anything with that yet.

And we then need to make sure

that we get access to our counter.

So let's add a couple of methods here.

Let's start with the increment handler method,

then the decrement handler method,

and also the toggle counter handler method.

And this is how we can add methods in JavaScript classes.

Now, down here, we now wanna hook this up correctly

by using this increment handler

and this decrement handler and this toggle counter handler,

referring to these methods, which are part of this class.

And then the question now is,

how do we get access to Redux here?

In the functional component we used hooks.

Use dispatch and use selector,

but hooks are not usable in class-based components.

Now, I briefly did mention it before,

react Redux also exports a connect function,

which is a function that helps you connect

class-based components to Redux.

Actually, you could also use it on functional components,

but for functional components, using these hooks

is simply more convenient.

But no matter if it's a functional

or a class-based component, you can use connect.

And therefore we will use connect here

on this class-based component.

How do we use it?

When we export our counter,

we don't export the counter component like this.

Instead we call connect and now connect when executed,

will actually return a new function as a value,

which we then execute again.

And then we pass our component

to that returned function as our argument.

So this can look strange,

but connect is a so-called higher order component.

We execute the connect function.

It then returns a new function,

and we execute this returned, this new function as well.

And to this returned function, we pass counter.

Now, why do we do it like this?

Because to connect, when we execute this,

we also pass something.

Connect also wants some arguments.

Connect also wants some arguments.

It wants two arguments to be precise,

and both arguments are functions.

I'll write them separately here.

The first function is a function that maps Redux state

to props, which will be received in this component then.

Hence we call this function map state to props.

That's not a name you must use,

but a convention which you will see in a lot of projects.

Now, this is a function which receives the Redux state,

and then this returns an object

where the keys will be available

as props in the receiving component.

So in the counter component, and the values of those keys,

that is then the logic for drilling into that Redux state.

So here we could expose a counter prop by using counter

as a key here, this key named therefore is up to you.

And the value is state.counter.

So we then pick the counter value from the Redux state,

and bind that value to the counter prop.

That's what we do here in the end.

And that's of course, similar

to what we do with use selector.

Here we also get the state

and drill into the state to get the counter,

and then store that in a counter const.

That's basically the equivalent

when not doing it with hooks, but with the connect function.

Because now map state to props

is the first argument we pass to connect.

The second argument is another function,

which is typically called map dispatch to props.

It's the equivalent to use dispatch.

Now the idea is to store dispatch functions in props.

So that in the counter component, we have certain props

which we can execute as a function, which will then

when executed dispatch an action to the Redux store.

For this map dispatch to props

receives the dispatch function as an argument automatically,

just like map states to props.

The map dispatch to props function

will be executed for you by Redux.

And then in here, we also return an object

where the keys are prop names

which we can then use in the component.

So for example, increment as a name,

and the value is then another function

in which we call dispatch and then set up our action.

Now, for example here,

an action where the type is increment.

This might look strange, but in the end, this ensures

that in the counter component, we'll have an increment prop

which we can use.

This prop holds this function,

so we can execute this function

from inside the component thereafter.

And when we do so, we will call dispatch

and dispatch does action.

And we can therefore also do this for decrement

and dispatch the action with a type of decrement.

And now that's the second argument we pass to connect,

a pointer at this map, dispatch to props function.

These are just pointers.

We don't execute map stage to props

or map dispatch to props here, we just point at them.

They will be executed for us by react Redux.

And when using connect, react Redux

will still set up a subscription

and manage a subscription for you.

It will do all of that.

It's just an alternative

to using the use dispatch and use selector hooks.

And obviously that's a bit shorter and easier, I would say.

But if you're working with class-based components,

you can't use hooks, and then this is your equivalent.

So therefore now to take advantage of these props

which we map into our component in the counter component.

In increment handler,

we can now execute this.props increment

because on our props in this component

we'll have a prop named increment

because of our mapping here.

And in the decrement handler,

we therefore can execute this props decrement.

And here in our JS X code,

where we wanna output the counter,

we would use this props counter

because we received a counter through props

because of us mapping this counter state

to the counter prop here.

Now, to make sure that everything works

because JavaScript works the way it does,

we need to call bind here

on the increment and decrement handler bindings in JSX,

and bind this to make sure

that the disc keyword inside of these methods

refers to the class.

So that's something we need to add here.

And then we can comment out

this functional counter component

so that we don't have the same name

being used twice in this file.

And if we now save this, it's reloaded,

and we can still use it as before.

It works as before, but now with a class-based component.

Again, class-based components

are not the focus of this course, but they do exist,

they are valid, they are still getting used

in a lot of projects, and therefore you should know

how to connect those to Redux as well.

Nonetheless, I will now, again, comment out

all that code here, essentially.

And comment the functional counter component back in.

And then export this functional counter component again,

and get rid of all the imports which we don't need anymore,

but I'll keep the commented code down there

so that we have it for reference.

And now you learned about both.

Now, we will stick to functional components,

but it is worth knowing about class-based components

and the connect function as well.