Redux Reducer Exercise & Solution

[00:00:00]
>> Steve Kinney: But first, I'm gonna have you kind of get your hands dirty, and you're gonna implement the ability to decriment. Which is again you're gonna make create a just kind of give you a tour of what's gonna happen, need to happen here is in our map dispatched to props.

[00:00:17]
We're going to need another method. Right? We're gonna need another action creator. And then we're gonna need to add it to the reducer. I'm gonna push this up as a decrement exercise branch, that you can be able to pull down and kinda start from where I left off.

[00:00:35]
Let's implement decrement, right? Tough to say. Let's try it out. So like we said before, the few things we need to do, I'll make another like action type. Again, this is optional, but recommended. We'll create the action creator, optional, but highly recommended. The parts that are not optional is putting the logic and our reducer.

[00:00:55]
Right. And then passing the ability to dispatch the action to a reducer, to a react component. So let's do this. Say, const decrement.
>> Steve Kinney: Cool. And then we'll make another one, const decrement value.
>> Steve Kinney: Just type decrement. All right, so we've got, we're halfway there. This is noncontroversial here.

[00:01:34]
>> Steve Kinney: We'll switch this to decrement, nice. Other thing about making the constants is you get autocomplete.
>> Steve Kinney: And we'll subtract one.
>> Steve Kinney: Finally, we need to hook it up to our component. So it needs to go into the mass dispatch to props, which is where it take that action creator, we're gonna figure out how to pass as a prop to the react component.

[00:01:58]
And then once the react component has it, we'll just add it to it on click. All right, so let's go ahead and we'll start by adding it here. We're gonna refactor this a little bit because this seems like, one of my general rules is if it feels bad, it probably is bad.

[00:02:15]
And this feels like a little bit much, so.
>> Steve Kinney: Decrement value.
>> Steve Kinney: And then we'll go up to the props.
>> Steve Kinney: And we'll decrement it, sweet. Let's just go verify that I haven't made some terrible mistake as I was typing.
>> Steve Kinney: All right. It goes up, it goes down.

[00:03:00]
Let's refactor this a little bit. Some of this is both for your convenience and the other like will actually help you a little bit with some minor performance issues. Some app, dispatch to pops can take a function where it will pass in dispatch. Right, but doing this for every single one of them is kind of obnoxious.

[00:03:21]
Right? If only we had a way to bind the action creators to the dispatch. Well, let's move along. Well, turns out we do. So yeah, you saw we implemented our own bind action creators. We are able to use and that's why we could use something like this. Where we said like, I'm not gonna bother you with the input.

[00:03:44]
Our part is, cuz I yelled at for leaving it. bindActionCreators, which will take then increment value and decrement value. And we can bind it to that dispatch so we get passed in. This will work. The only change is these will get, these props will get passed in as increment value and decriment value instead of increment detriment.

[00:04:14]
I named them differently cuz I didn't want to confuse us, but now it's going to be a problem. So let's actually rename them.
>> Steve Kinney: We'll call this one increment. And we'll go find this one here. I'll call it decrement. And now they'll be passed in the exact same way.

[00:04:34]
But, you're like, well, yeah, that's better. But it also feels like, really, I had to get that dispatch, call this other thing and bind the action crators. Turns out, in modern versions of react Redux, you can actually just take this object, not use a function and just use the object like that, right?

[00:04:59]
Now, I mean theoretically, since this is just an object, you can even not store in a variable or a constant called mapDispatchToProps, you could literally just paste it in right here. And it will basically take those action creators, will automatically bind them to the store's dispatch method, and handle all of it for you.

[00:05:17]
Let's verify that I haven't made a terrible mistake.
>> Steve Kinney: You see everything's still works except for that I have imported I'm never using it. But yeah. So like, if you can get away with it, if you do not need to take other data and pass it in, I would totally recommend doing this, cuz these are referentially the same, right?.

[00:05:41]
If we think about when before when we had that dispatch function which was returning a new object every time, right?. The new object, when react it gets, this is a different set of functions. We're defining those functions every single time, this is all new, right? This is, hey, I've seen these functions before, cool, right?

[00:06:01]
And so not only is this cleaner for us, it is cleaner for React. Everyone wins, when you can get away with it, right? If you don't need to do other stuff. Just take the functions as they are.