In the previous assignment,
we added three new actions we can dispatch and we do dispatch them in our counter container, decrement,
add and subtract. Now for add and subtract which we obviously handle in our reducer,
it wouldn't make sense to also receive a payload, some additional data passed along with the action type
because right now, we have hard coded +10 and -8 into the reducer
but of course, in a lot of applications for example when creating a new blog post, you would get that
information from your component, the input the user entered for example, the ID of the post the user clicked
on, you can't hard code that into your reducer for that reason.
So let's also say we don't want to hard code the value by which you want to add or subtract to the counter
or from the counter into the reducer,
instead we want to get this information along with the action, so we can easily implement this. On our
action here,
we are just dispatching a javascript object and only the type property is set in stone,
so to say. We can obviously add more properties to that object,
no one is stopping us from doing that, we can simply add a second property for example value or just V
whatever you want,
you could choose any name you want here and you can of course also add multiple properties.
So I'll take value here, though
what you also often see is just payload, payload could then itself be a javascript object which holds
all the relevant payload to this action.
But that's just something you often see,
you can also skip the payload and just have a value and let's say that's ten and a name and that's Max,
so you can add as many properties as you want.
Now here, I'll add one which I'll name val,
again the name is up to you
and let's say we always want to add 10.
And of course since we're inside the container, we could easily connect this to some input field
we have. Now for subtract, I'll add val and let's say this is 15,
so now I pass the value which I want to add or subtract along with the type
and again, the type property is the only property you have to have where the name is not up to you.
Now we can extract that value property in our reducer,
so here for add and subtract, I no longer want to add 10 or subtract 8,
instead here in the add if check, I'll simply add action.val and here the property name val is of
course the property name I chose here in my counter container, in
this object I pass in this action, so with the action I dispatch,
val, and the same of course for subtracting, here I also simply use action.val.
So I as a developer of course know what I named this property when I dispatched the action and I have
to retrieve my value or the data which is relevant to me in the reducer from that same property name.
Save all the files and get back to the application,
now the labels are wrong here we're subtracting 15 actually
but let's click the buttons to see if it works.
Let's subtract and we subtract the 15 and we can't add 10 again because we set val to 10 for this button.
So let's quickly update the caption on the other button so that it doesn't say subtract 8, but instead that it simply
says subtract 15
and now our application is 100% up to date. Now though and that's important,
passing a payload with the action, passing some additional data and not just passing the type.