Create Action Exercise

[00:00:00]
>> We'll take this initial code. I think I need to actually add it to the app in this case, cuz I pulled it into this when I bought it, because I'd like to put it in here, I'll bring it in, and we'll push up a live coding branch.

[00:00:17]
For the workshop is, see if you can kind of refactor the rest of these and kind of get them in place. And we'll get a sense, and then we'll switch out the reducer as a second thing as well. So let me just add that to that branch, I'll push it up and drop it in the chat.

[00:00:29]
Take a few minutes, try it out, and then we'll refactor a little bit more together. And then, we'll kind of see the component pieces and then we'll go back to these kinds of larger abstractions. Awesome, all right, so to prove our point, let's go ahead and let's refactor this a little bit with the actions, and then we'll swap in the reducer as well.

[00:00:51]
So what we can do here is, again, the createAction, and why not, I'll repeat it one more time, is great because you can use just anything you have right now, even the reducer we'll see in a second. You can use anything that you have right now. So here we'll say that add amount, Third time's the charm in spelling it is a number.

[00:01:14]
So there's what I wrote before as well, and that will return a payload, That is that amount. Cool, if we grab that for a decrement as well, Keep that the same. Could you make an abstraction? Should you? No, and then finally we'll do one more. And this one doesn't need anything, so we give it no function.

[00:01:57]
It will automatically hit this type correctly, right? This idea of a payload that doesn't match, right, cuz it's defined as undefined. I might get yelled at, I'm pretty sure that I get away with it if it is explicitly undefined cuz that's how JavaScript object work. But this type that had nothing to do, this type isn't my hypothetical existing code base, I'm trying to just have better tools and better abstractions.

[00:02:19]
So that the next feature I work on is less tedious than the one before, so I can impress my boss. If we have this in place, we should be able to then just say, Wait, if I don't define these in variables, they just don't exist. So, this is why you live code in front of your friends.

[00:02:50]
And then finally reset. And these are the action creators. These are ones if I call these functions later, and I pass a number, it will create the correct action, right? And that will just kind of work for me. Now we can use it, we'll show how to bind it to dispatch as well if we really need to.

[00:03:14]
But cool, so we'll have that in place, and now I can just swap these out. I no longer have to do that entire ceremony as I mentioned earlier, of making the action type, Storing them in Constant, and then making the action creators by hand, that is just done for me.

[00:03:33]
And as I alluded to earlier, right, if I'm using type script, if I try to do, Even as I hit the dot, you'll see payload is not an option on this one. But if I went up here, payload clearly works. I'm not getting a type script error, automatically typed, automatically ready to go.

[00:03:56]
All the boiler plate gone through one simple function that worked with user reducer, works with vanilla Redux, right? So even if you only grab that piece of the buffet and good to go, awesome, more productive, ready, rock and roll, Philip.
>> Do these actions it's creating have a success and a fail and all that stuff, or are we gonna do that-

[00:04:21]
>> When we do the asynchronous ones, we will actually, yes. These don't. [LAUGH]
>> Okay.
>> These do not, right? Cuz these are just asynchronous, hey, this thing happened, right? But all of the ceremony around thunks and promises resolving, and pending and failing, there are also abstractions for that, and it's all wired up and ready to go in a way that you can use just out of the box, right?

[00:04:46]
And so we will see that, absolutely. These are just standard, like nothing happened. I'm just telling you, reducer deal with it or don't deal with it, as well. So we're gonna have that in place too. And like I said, any of these pieces that you like, it's like, for everything I'm showing to you, you just take what you like.

[00:05:04]
You take the little pieces that work for you and work in your code base. You take the free TypeScript support, you take the convenience, right, you leave what you don't want. It's totally cool with me. I won't feel bad about it. Yeah, and so now we've eliminated a whole bunch of that kind of common complaining about React, which to be clear, I have participated in the complaining, right?

[00:05:27]
And that has just taken care of it for us. Now one thing that we can do, and this is a little bit of just a TypeScript hack which is like the return types here. All these functions theoretically we could use, right? So we could take it and say, we wanna get rid of this piece here.

[00:05:51]
I'm just gonna move it down underneath. We could say, either, Type of, either one of these will work. Like that, if you look at this one, you'll see that it's now automatically got the correct type, or you could do the return value of the function. You could do, you can pull it out.

[00:06:20]
Actually, I would recommend actually this instead. But the other one will work if that's what you need. Type of return value. Return type. Return type, during the function returned of an argument, what's that question mark at the end? That was just me having a typo. There we go.

[00:06:59]
Typo gone, and if you look at the counter action, we will get the same union by just grabbing the return types of these created actions, and will automatically as we add things. Now there are other ways, if we use some of those slices, we'll get all this for free as well, but this is some of how this is working on our behalf in case you're like, I don't like magic.

[00:07:18]
Well, I'm here to dispell the magic for you, and we say Return type, type of decrement. And then we can say, for the same as, Could you write a very fancy type that just took a list of them and did this? You absolutely could. Could you put them in array?

[00:07:39]
Yes, you can do a bunch of stuff. I'm just here to show you that you will get the full automatic type support for the counteraction, just like you manually wrote it before. Cool, now you will get the same, only passing the arguments that work, so on and so forth.

[00:07:56]
This is the same type that we had before. Payload undefined, number, number for the other two. Boom, done. All convenient, no guessing, no manually having to try to figure it out yourself. Based on the code that you defined, you've declaratively also set up all the types, right? And I will make this point once again cuz you all brought it up, you get for fun at least autocomplete and helpful hover hints in VS code if you're in JavaScript, so, why not?

[00:08:23]
Until we get all of that in place.