Okay.
What we have at the moment is very limited.
I mean, it's a counter anyway, so it's always going to have limited functionality.
But supposing we wanted another button where we could increment by a certain amount, we would need
to send something extra to our Redux store along with the action.
So as well as the type of action that we send, we can also send a payload.
And we can do that inline inside the counter reducer if we wanted to.
But let's take a look at another bit of Redux terminology that you may come across, which is an action
creator.
And these are really just convenience functions that make it slightly easier to use our Redux functionality
inside our components.
So I would say, for instance, I would export a function and let's say it's called increment for the
first one.
And this increment function would take an argument.
Let's say it's an amount.
And we could give it an initial value of one for instance.
So that makes passing an argument to our increment function optional.
If we don't pass it it's going to be set to one.
If we do pass an argument, well it's going to be whatever that amount is and we can return from this.
We can return the type.
And that's going to be what we used before which is increments.
And we can also return inside this object a payload.
And we'll set that to the amount.
And we would also do the same for the decrement function or action creator.
I'll refer to this as and we could say decrement.
And we'll keep the amount there as one as well.
But just change the type to decrement and inside our action.
Now because we have a payload as well.
So as well as the type we would also specify the payload here.
And this is going to be a type of number.
And let's move this down because I'm going off the edge of the screen.
So as well as the action type we've now got an action payload.
So we could say that the data in the increment is the Statedata plus the action payload.
And that's going to give us either one if they haven't provided an amount or the actual amount, depending
on what that argument is.
And we'll do the same for the decrement as well.
So nothing too complicated here.
These are really just helper functions that simplify the process of dispatching actions.
And if we go back to our contact page, then currently we're passing this as an object full of type.
But instead because we have exported our functions and these are named functions because we haven't
said export default function.
So we have to use this import by the name of the function.
So I'll go back to the contact page.
And inside here it's going to be decrement which we get from our counter reducer.
And then because this is just a decrement function, we don't need to pass the parameter because we
initialized it in the function.
We'll do the same for the next one as well.
We'll specify increment again.
We don't need to pass any parameter to this, but I'm missing something and I'm missing the closing
right parentheses there.
So let's add a third button inside here.
And for this one we'll just put an arbitrary number in there of five.
And we'll just change the color of the button to primary in here.
And we'll just say increment by five as the label for the button as well.
So just an extra function to demonstrate this tiny bit of functionality.
So let's go back to our browser.
And our increment and decrement should still work exactly as they did before.
But now we've got an increment by five, which does what you would expect it to do.
It's now going up by five.
So this is like really simple functionality.
A counter is not exciting.
It's really the Hello world version of how to use Redux, but I really did just want to start with the
absolute basics with Redux, because as we move on to what we're about to look at, which is the Redux
toolkit, then what we've looked at inside here in our counter reducer, some of this stuff happens
behind the scenes, but really Redux Toolkit is a wrapper around this functionality.
And Redux Toolkit is going to allow us to reduce the amount of boilerplate that we have in our code,
but still give us the same or better I should say, functionality.
So next, we're going to take a look at using Redux Toolkit to achieve the same as what we've done now,
but it will be a bit less code to achieve the same functionality using that toolkit, and it will allow
us to just warm up and get our hands dirty with that.
And we'll take a look at that next.