Create Reducer Exercise

[00:00:00]
>> So this point I just try to explain a little bit like I did increment. If you wanna try out decrement and reset, give it a shot. And we'll take a look.
>> This might be obvious, but this is basically replacing line 26 or 27, right?
>> Yep.

[00:00:16]
>> 21 is replacing 22.
>> Yeah, this group is replacing this group down here, right, and with full. Yeah, we got typeState we used to create action thing earlier, but we get full support for everything. And again, when we start working in some larger things, like the ability to do this makes you 20 times more productive.

[00:00:42]
That might be a little bit of hyperbole but at least 1.5x more productive, yeah?
>> Is it worth calling out that, at least as it is right now you're not explicitly returning the state, you're just mutating in [INAUDIBLE]-
>> I have to return-
>> The ad case method of the builder is wrapping that reducer, in a check to compare whether the state was mutated inside your reducer, and then returned that, so-

[00:01:08]
>> Yeah, all that ceremony is taken care of for me, I don't have to worry about.
>> Do you know why do you have action after state in the argument there?
>> I mean, with this, I guess cuz I theoretically, I could do this, hold on. Cuz it has a payload, right?

[00:01:22]
As opposed to plus equals, right? Remember this one? And also, we know the payload is a number, so that'll work.
>> Okay.
>> Yeah, good call, I was mostly just showing off, okay-
>> I couldn't tell if you were joking when you said you weren't gonna write a bug.

[00:01:40]
>> [LAUGH]
>> I could still write bugs.
>> [LAUGH]
>> Right, it's is it a bug, or it's like what are my intentions? I'm the product manager right now, I choose what the product requirements are. It's just a feature, right?
>> And you would export line 20, right?

[00:01:56]
>> Yeah, just export that, and that's a regular reducer. Pop it into your existing Redux infrastructure. Pop it into use Reducer, right? Like, go for it. All right, so one of the questions that came up during the break were the other ones. You don't need to catch a default case even though we had that builder.add default case.

[00:02:20]
I am sure that there is a reason why someone needs this one, like this is if you truly need to respond for the fact that nothing got matched. Now in Redux, every action goes through every reducer, so generally speaking there are actions that you ignore all the time, right?

[00:02:36]
And I think that is a feature that I greatly admire in Redux, so I don't personally value this one. Ad matcher is very good for thunks and asynchronous things, where it's like if you had toast notifications that came up and you want to respond to anytime a network request has an is rejected state, right?

[00:03:01]
And you'd be like, couldn't fetch this, so you needed to maybe do something, and update your state in some way around that. Or maybe you had middleware, right? I guess in the reducer you're only caring about the actual updating of the state. But you wanted to add a notification to your Notifications array, something like that, you can catch anything that matches is rejected.

[00:03:21]
There are use cases for that one, particularly in asynchronous situations. I wouldn't abuse it too much for known cases of, I'm just gonna match everything that kind of looks like this, just either, how to put this nicely, rethink what you're doing. Right, like write some better actions or something along those lines.

[00:03:39]
Occasionally there are times where we'll have to do stuff like that, and I'm here for it. Yeah, so let's build this out, and what I think just for to kind of do it like a victory lap. Let's build out this reducer using these tools, and we'll use it in Use Reducer.

[00:03:55]
And the nice part about this, and I think this is a standard thing, but I'll say it out loud as well, is with Redux. Redux is commonly used with React. I use Redux and spelt out, right? Like you can use it, I've used Redux not in a web app, right, like this is just regular JavaScript at the end of the day, put it wherever you wanna put it.

[00:04:19]
It's just a nice set of tools that's really great for predictably updating state. Cool, so let's grab the other ones and kind of see it in action, As well so we can have a document that will, quote, unquote, mutate the, I don't have to worry about spelling, so that's good.

[00:04:46]
And then builder, addCase. This case reset was the other one, right? Cool, not just has the state, I mean it just has an action without a payload so I will get the same type safety there if I tried to do something like .count equals action.payload, right? It can't, you can't design undefined to a number, so it's like, don't.

[00:05:20]
So in this case, we'll just set it to 0, and that is fine. And I can omit it, cuz there's no real information on there, I don't have to check its type. The builder has already confirmed all of that for me. So now I've got a reducer in place.

[00:05:31]
And as I have the thing that I keep repeating is, if we actually pulled this out, we can see that it is, let's see if I actually say counterReducer. It was actually, it was why I was doing this before. What we actually did is just a function that takes state and action just like any other reducer, we use anywhere.

[00:05:57]
To make the point, I will show it to you in an application real quick. This is just, it's got nothing, it's just a React component. So we'll just show it and use use Reducer just to verify what I have claimed, and see that all of this works as we expect, so we have state and dispatch.

[00:06:19]
Let's make sure I exported that. Awesome. Use reducer, in this case the initial state will say is count, Is 0, we put it has an reducer first. Awesome. Cool, and we will pop this initial number in here. Look at that. That's actually coming from React. So here, we'll actually say that, let's make sure I exported those actions.

[00:07:12]
I did. No? Did I? I did not. Yeah?
>> Excuse me, why do we need to specify initial state again if we have a reducer with initial state?
>> At this point, mostly because I was making React happy. Will React let me get away with that? Yeah, React will not, let me get away with it.

[00:07:41]
And, I mean, I could probably actually tell it from the return value on here, but, generally speaking, What was I gonna say? It React wants to have that information as well. So we'll say on click, And we'll say, A batch, Where's my auto import? Did I save this file?

[00:08:28]
Decrement will do it by one, Cool. And then we'll do that for these three here. You can see I can't pass a 1 in there which makes total sense cuz, again, typing still works. Not my typing as we can see, talking and typing, tricky, but the type system in fact does work in this case, and so let's try it out.

[00:09:04]
Again, all this stuff is super standard, despite the fact that it's a nice set of conveniences, you are not bought into anything, use it wherever, [LAUGH] you basically use it wherever reducers are accepted. All right, there's a tag line, and these actions, again, would work as we saw before.

[00:09:21]
I could actually, I still have that old Reducer sitting around that we can make that point as well. That one's there, so let's say that we wanted to swap it out. Not sure I wrote the logic of the same way, but let's let's try it as a bonus round, and Mark will cut it if I make a mistake.

[00:09:39]
Yeah, so the actions with a regular standard, vanilla, as we've done 1,000 times and use Reducer or Redux, with my create actions worked, my full on, Create Reducer worked as well. These are all interchangeable, they're just abstractions where you get the type safety, you get the common mistakes, all handled for you.

[00:10:00]
You get the batteries included, you get a bunch of libraries that you would have had to wire together yourself all done, to make you more productive, and write more resilient code simultaneously. Who doesn't love that sales pitch?