All language subtitles for 011 Dispatching Actions From Inside Components_en

Now for dispatching actions,

I first of all, want to have two new buttons here

which allow me to dispatch actions

for incrementing and decrementing.

So here I'll add a new div.

And in that div I'll just add two buttons.

The first one says increment, the second one says decrement.

So that we have these buttons.

And now to add some spacing,

I'll quickly dive into counter.module.css

and add this selector .counter button

which selects these buttons here.

And I'll just give them a margin of one rem

in all directions, just so that we have some spacing.

Now, with that added, with that setup,

now we want to wire up those two buttons,

increment and decrement,

so that they do increase or decrease the counter by one.

Now we know that we need to dispatch an action before that.

But how does that work from inside a react component?

Well, there is another hook which we can use,

the use dispatch hook.

When we call use dispatch here,

we don't pass any argument to it,

but instead, this gives us back a dispatch function

which you can execute.

So this patch here is a function,

a function which we can call,

which will dispatch an action against our Redux store.

So therefore now,

I'll add two new functions here in this counter component.

The increment handler

and the detriment handler.

So two new functions which will wire up to the buttons.

And in the increment handler,

we want to use this dispatch function and execute it

to dispatch a new action and then do what we learned.

An action is an object with a type property.

So let's add such an object here

as an argument to the dispatch function call

so that we dispatch this specific object.

And then the value for type should be one

of the identifiers we use in our Redux store reducer.

So here in the reducer function,

we handle the action type increment

and the action type detriment.

So we should dispatch one of these two identifiers.

Of course, exactly these identifiers,

without any typos or changes.

So back in counter here, I'll dispatch increment

and then here in the detriment handler

I'll dispatch an object with a type property

with a value of decrement.

Now we need to wire up those two functions to the buttons.

So this first button we add an on click prop

and point at the increment handler.

And on the second button

we do the same for the decrement handler.

And if we do that and save this,

if we now click increment, you see the counter increases

and if you click decrement, it decreases.

So now we're able to use what we learned about Redux

in this react demo, in this react component here.