Okay, now let's take a look at Redux Actions, which is how we effectively update our global state
and then cause our component to reflect that change in the global state in the browser window.
So we'll head back to VS code and let's go back to our counter reducer.
Now one of the original complaints with Redux was that we needed to create a huge amount of boilerplate
code to not do very much.
And with Redux Toolkit, a lot of that boilerplate has been taken away from us.
But for this particular example, we're going to add not too much boilerplate code.
We'll still keep it fairly minimal, but the way that we typically use actions inside our reducers is
we'll add the action as a second argument to the reducer function.
So over here I'll specify a comma and then I'll specify an action.
Now just to remove the warnings that we're going to get I'm going to give our action an inline type.
So I'm going to specify a colon.
open curly brackets.
And our actions have a type property.
And I'm going to specify a string.
Now the way that this works is when we dispatch an action, we check what action type we're receiving.
And just as a heads up, we're just going to create a very simple counter.
And we're going to be able to increment and decrement.
So one of the types that we're going to receive are action type is going to be an increment or decrement.
And it's going to do what you expect it's going to do.
Very simple example just to understand the concepts of Redux.
So inside here the way we typically use this is we'd use a switch statement.
And let's use the snippets that we get with VS code for a switch statement.
So I'm going to select that.
And then the switch parameter is what are we checking for.
What are we going to switch on.
And that's going to be in this case the action type.
So we're going to check for an action with the type of increments.
And inside this first case we're going to return.
And in the case of a reducer function we need to return the new states.
We don't modify this state.
We don't say data is now 43 or data is data plus one.
We take the original existing states.
We make a copy of it or clone it to create a new state.
And then that becomes the state after we've adjusted it.
So the way that we would approach this is we'd open curly brackets after return, and we'd use the spread
operator and we'd spread our existing state.
Now, the spread operator that does not mutate data, this is going to create a new piece of state from
the original state that we're using the spread operator on.
So currently what we're doing here is we're spreading the properties, which is just one property,
the data with a value of 42.
And then below the comma.
Here we can specify the data is going to be the state dot data plus one because we're incrementing.
So what we return from this case is some new states with the updated data property below this one.
Instead of default we're just going to have two cases here.
We'll have a case for decrement as well.
And I'm getting some errors here because I've put string in quotes for the type which is entirely incorrect.
That needs to be the type of string, not type string in quotes.
So that removes the errors that I'm seeing there.
Okay, so for the decrement then fairly straightforward.
What we're going to do here, we're going to do something very similar.
We're going to return the state and then say that the data is state dot data minus one.
And we also need a default case here as well.
So we don't need the break because if we're returning, then that stops the execution of the switch
statement.
So we don't need a break statement here.
And then for the default case we are just going to return the states.
And we don't need the return states at the bottom.
So when our component or when our application loads then our initial state, the data is going to be
42.
When our component loads, it's going to receive the states from the default case.
And in the case that we dispatch an action to update our store, then we effectively call the counter
reducer function.
And then we either increment or decrement the state.
So let's go back to our contact page and see how we use this.
Now in this case we need to dispatch these actions.
And there's another hook that we use from React Redux to help us with this.
So I'm going to say const dispatch equals use dispatch and then just open parentheses.
And then we've got access to this dispatch function.
And below the typography let's just create or use material UI.
Again we'll create a button group as we'll have a group of buttons here.
And we'll specify button.
And we'll give this one a color of just error.
So it's red and we'll give it a label of decrements and we'll give it an onClick event.
And for this one we want to dispatch an action.
So I'm going to open parentheses.
Then add the arrow.
And we're going to say dispatch.
And inside here we need to dispatch an action.
So we open curly brackets because this goes as an object.
And inside our reducer we've specified that the action is going to have a property of type.
So that's what we specify inside this object we specify type.
And then we're going to use this one to decrement.
So I'm going to specify the type as decrement.
And this would need to match of course what we've put inside here for this case.
Now typically if we were using Redux this way we would make the effort to introduce a bit of type safety
in our application so that instead of typing in a string manually like this, we would actually use
a constant and ensure that we can't make typos when we're dispatching these actions.
I'm not going to worry about doing that for this quick and simple example, because very soon we're
going to take a different approach where we don't need to worry about that.
And then I'm just going to copy this one down.
And I'm going to make this an increment button.
And instead of error I'm just going to give this a color of secondary and update the label to be increment.
And if we go and take a look at our progress, we can see that we now have two buttons one to decrement,
one to increment.
And it will possibly come as no surprise at all.
Because of the simplicity of what we're doing here.
We can click up and we can click down, and we can see this updating accordingly as we'd expect it to.
So it doesn't feel like we've achieved very much there.
But what we do have is global state for our application.
Now this data property could be used anywhere in our application.
We can have buttons that can affect the data property from any part of our application.
And whichever component is using that selector, that state would be rerendered based on that component
being updated.
So pretty useful stuff.
And what we'll take a look at next is just another bit of Redux terminology, because you may come across
this in the world.
And we'll take a look at using action creators and also how we can pass a payload in a dispatch action
as well.
And we'll take a look at that next.