All language subtitles for 013 Attaching Payloads to Actions_en

Let's dig deeper into Redux.

Up to this point, we only dispatched simple actions.

They only had a type, nothing else.

In reality, you often wanna dispatch actions

that also carry an extra value.

Let's say we wanna add a new button

to the counter component, which says increase by 5.

We could, of course also had a decreased button

but let's stick to the increase button for now.

Now, even though it has this label

it of course only increases this by one

because I still just call the incrementHandler here

and dispatch increment.

Of course, we could now go to the store

and prepare our Reducer for another action type

which is increaseby5

where we then return our updated state,

where we increase the state.counter by 5.

But that's not scalable.

We can't predict all possible values

we might wanna support.

The counter of course is just a dummy example.

But if you're using this in a real project,

which we'll do later in the course,

and you need to work with any user input, for example,

you can't hard-code those values here in your Reducer.

Instead, the action which we dispatch

and which reaches the Reducer

often needs to carry extra data.

So that, for example, we have a increase action type here

and that action type

does not increase the counter by a fixed number,

but instead we expect to get the value

by which you wanna increase from the action.

In there we could say that we expect

to get the value property or have an amount property

or whatever it is.

And then we wanna increase by that.

That would be a reasonable expectation.

And that's of course, a very common scenario

hence Redux and React Redux supports it.

Back in the counter, we can now add a new function here,

the increaseHandler, and in there we again wanna dispatch,

but now the action which we wanna dispatch

will not just have a type.

It will have one as the type is increase

but it cannot also get an extra payload,

extra data which it carries.

For example, an extra amount property.

And this property name is entirely up to you.

It's your action.

It's your action object.

You can add whichever properties you want.

So here I'll add an amount property

and set amount to 5 here.

Of course 5 is therefore still hard-coded

here in this function, but that's just a demo.

Of course, this value could be coming

from an input field.

Here it's hard-coded

but now we can point at the increaseHandler here.

Now we add this extra payload to the action

and in our store, in the Reducer function,

when the type is increased,

we do expect this amount field on the action.

Therefore, of course, you need to make sure

that the property you're accessing here,

on the action in the Reducer,

has exactly the same name

as the property you add to the action when you dispatch it.

Otherwise you won't be able to extract this data.

Hence now, if we save this and reload this,

we do increase by five, but now this is very flexible.

We can easily change this to 10 and for completeness sake,

change the button text to 10 as well.

And now we increase by 10.

It works just like that because now the Reducer is dynamic.

It extracts an action payload.

And action payloads are very common, often needed,

and as you see, it's super easy to add them.

It's just an extra property which you add

to your action objects.