Creating Actions for colorReducer

[00:00:00]
>> All right, let's take a tour of this new app together and check it out. So there's a lot of functionality that still needs to be added in. Like for instance, you can see the RGB values, you can't change them because there's no action setup for that yet.

[00:00:20]
Wow, imagine that. In a perfect world, you could click any of these colors and switch it into like the main color. You can save colors was this one called 24 Carrot in memory until you refresh the page, but like generally speaking, it's got the accoutrements of a full app that needs an implementation.

[00:00:49]
Things that does have is stored somewhere list of 6000 different color names. So if you happen to come across one of the colors that has a name because there's billions of colors, right? If you come across one of the 6000 has a name, it will show you the name.

[00:01:06]
And this color input definitely works. I don't want to talk about how much time I spent doing this looking for a color. It's not important. These are two of the named colors, though. 1989 Miami Hotline was the name of a color. That's what that one is. Blue Fire and 24 Carat were some of the more delightful color names that I found.

[00:01:30]
But if you get bored later, can you scroll around looking for colors and see which ones have names? You, absolutely could. We should talk later about what you do with your free time, but it's an option and I can't judge you because it's what I do with my free time.

[00:01:46]
So, we have the input field we have some amount of a reducer set up. So we'll take a look at that and then what we're going to try to do is kind of get at least either a these inputs or be clicking on these buttons to work is kind of be a little bit of a choose your own adventure like eventually we should probably have both working but like yeah, we'll have choice time as well.

[00:02:05]
So let's take a look at the app. Right now it's using new state. So we got to actually change this out for a use reducer in a hot minute, but like first let's set up some of those actions for ourselves. So what I'm gonna do is I'm gonna create a new file.

[00:02:19]
Let's call it a Colors. It's gonna have the red, let's call it color reducer. It can just be a TS. We're not gonna run any TSX file in there. Now the one setting that I have turned on, which is good for normal, which is like, it doesn't like when I just have empty files, so that will go away in a heartbeat.

[00:02:44]
Let's talk about really if we only worried about the RGB colors and the hex colors, which we can figure out some abstractions for doing better stuff in a little bit, what would that look like? So we have type, update. Update color action, and that's gonna take the equal sign.

[00:03:06]
That's an action that's going to take, let's call it Update hex color and its payload. Like there are some tricks that we can see later for like ways to get even a better type here when we look at template literals later but like, It's like hex color is right now a string, right?

[00:03:28]
And so now we've got a little bit more of a full on put that export to keep things happy. We'll just say, let's make one more, like, could you go ahead and like, did I later in a pre-baked thing make hsv, hsl all the other color ones? Yes, absolutely.

[00:03:47]
But let's just do a simple one for now. Type and we'll say, and like I'm not even super worried about like miss typing because I know that like, the mistake won't bite me later because I will have autocomplete on these two types. Now I will need to fix it because I don't need to embarrass myself during code review.

[00:04:08]
But here we are, RGB and we're gonna say that takes an array of three values. You could just say number, number, number. And what's cool about this is that like, TypeScript knows that you're not just gonna give it an array of numbers. You're gonna give it an array of three numbers, right?

[00:04:28]
Cuz an array of numbers could be an array of one number, an array of 25 different numbers, right? This is a number, number, number, right? In a lot of ways this is either tuple or a tuple, depending which way you like to say it, you can have a string, you can have an array of, can be a string or Boolean or a number.

[00:04:47]
But if you say in the brackets string Boolean number is expecting an array with the first element is a string, the second one is a Boolean, and the third one is a number, right, and this is a powerful way. Why are we using an array for RGB? Because the library that I'm using to come up with the hex colors and do all the conversion that is not apropos to the actual thing that we're trying to learn here takes an array.

[00:05:08]
[LAUGH] So there's ways to, you saw me use that return value before could I have like pulled in the RGB function, and unlike return value of that function, I could have done that as well. I'm gonna do later if I feel like it, but for now that's yeah, that's how this works.

[00:05:23]
So we've got that in place. What is my color state like right now we're gonna say that everything is based on the hex color because why? Because the input color field that is built into the DOM gives you back a hex code as its event target value. So that seems like a good enough place to base our color state on, color stable hex color state.

[00:05:43]
Just color, hex color. It's gonna be that string. And, cool, our initial state, I don't have a favorite hex color that I can remember off the top of my head, maybe I do. Initial state should be of the type color state. And this is mostly to keep me honest cuz like I define this, I just wanna make sure the next thing I write, particularly while I'm live coding, is the right shape cuz it's gonna otherwise guess based on whatever I type in here.

[00:06:16]
Does anyone have a favorite hex color? Seems like you're good enough hex color the ad fi ad a five. Just for viewers at home watching this later, that was Mark, [LAUGH] the founder and CEO of Frontend Masters. So just FYI. Cool, so we've got that in place. We'll make a color reducer which is going to take stuff that we saw me kind of riffing on earlier.

[00:06:59]
The state is going to be some kind of color state, and I could say that by default, it should be the initial state. And do I need to do both as you've all learned, I do not want, wait a minute. Yeah, cuz if you use curly braces, it thinks it's an object.

[00:07:19]
Initial state, And I like to do both cuz I don't trust myself honestly, right? This is kind of like it went like cuz TypeScript will try to help and infer things sometimes I don't want that. Sometimes I want to triple check everything because especially while live coding, right?

[00:07:39]
And we'll have an action that is either going to be the type update hex color action or I'll call it ColorAction in this case. I think we should call it HexColorAction. That will change in both places, cool. And or it is the type UpdateRGBColorAction. All right, so we've got that in place.

[00:08:06]
We'll say if I was like, do I try to write another switch statement even though I never write switch statements. I'm like, now this is not the time for that. Will say, look at that autocomplete. Who doesn't love that? One thing I'm gonna do is show you real quick as I'll have action payload, right?

[00:08:24]
And so now it knows on the other side of the equal signs that action payload, H hex color, right because it knows what properties are allowed to be on an action of the type update hex color. So it's like yo, that has a payload totally autocomplete that for you but it's only got one property.

[00:08:43]
So as you're deconstructing it because obviously it's the hex color right and non RGB, right? Love this makes me so happy. And then we'll return everything else in the state plus that hex color, right? Let's grab some of this here for it like cool thing. This comparison appears to be unintentional because you already use this one basically.

[00:09:10]
It sounds like it's saying the only option left is update rgb color and you just did an rgb hex update hex color. Yeah, if I had more things that you'd be like, yo, that one does not fit into all the things I was expecting. So you can't have two cases in here.

[00:09:30]
Right, and it's okay, cool, but this can't be a hex color then. Rgb, cool and now it's like well, yeah that's not like that's not a valid hex color so you can't do that, right? And so it's like just again following the red squiggles makes things a lot easier.

[00:09:53]
Yeah, so there is a library that I'm going to pull in. I think it's what, color convert. Other trick. You start with this and go. If you don't remember exactly what you're pulling out. Yeah, there it is. Cool yeah, normally we write it the other way like Python does import the library and then what you want which would be a lot easier for us but here we are.

[00:10:30]
Typed, it was great to protect you from lots of silly mistakes, but not ones that are totally legal and legit JavaScript, right? So yeah, I pulled in this RGB and I'm using it up here. All right, like before I was like, Yo, it looks like it's not being used.

[00:10:45]
And yet, if I wrote it up there at work, but here was redefined, because one line above enclosure scope you can have a variable that has the same name in a different closure scope. And that is totally legal and valid JavaScript. That is not what I wanted. So yeah, some of the rules still apply.

[00:11:05]
So let's not redefine the same name as our conversion function here. We'll just say context color is easier. Multi cursor later, will say, look, RGB is now what I think it is. RGB.hex exactly what I wanted, and I will pass it in action.payload.rgb. Now you could say maybe getting a little fancy, deconstructing wasn't the greatest and you're doing it again over here, it's fine.

[00:11:39]
So cool, now I have both of those actions kinda taken care of. Again, just to validate. We can see that it's type the tie does not exist on never because we've handled all cases for the action object and it's tight. Like that's it, that's all they can possibly be.

[00:11:57]
We know I'm still going to do this, because I have it, honestly. So I don't trust myself and I don't want to get bitten by it later, but probably forget that. Nice, so now we've got that as a full on reducer let's export it and we can go ahead and switch out an application.

[00:12:27]
Let's set state with like say const, useReducer. And that's going to bring in What did I name that reducer before? Color reducer. Color reducer. And look, it's angry because I'm not getting the right initial state, which I probably didn't export or did look at me. Cool, so we've got that in place.

[00:12:58]
And what's nice is it's gonna know the types in this case. So we know that state. And if I pull it down here, you can see. It's got hex color. It automatically has the typing of everything there. So I can even say, look, and that works. And we'll grab dispatch out.

[00:13:20]
Cool, and now on change, what we want to do is say Yeah, update-hex-color. And again, was that a key? I don't really have to remember because all of my typing will handle stuff for me. What you angry about? One argument we got to Say it's actually event target value do you don't fancy there but it caught it for me so that's good.

[00:14:06]
That's not inside an object. Paul, what's you angry about now? Payload, it's got to be wrapped in payload. That's why I made that object before. Like, the nice part is if I had messed it up in JavaScript, you know what I would have found out? When I went to change the color a bunch of times.

[00:14:33]
Or when I already had a pre-written component test and all those things. Like, all of those are feedback loops that I don't love. That said, let's make sure. Cool, all my functionality works. We learned what Mark's favorite color actually looks like. Which is a little bit of like a snack grain.

[00:14:57]
>> Definitely not very poorly.
>> [LAUGH] Yeah, no, I didn't say it was like yeah, delude that was your favorite color. We know why you chose it. I'll leave that as an exercise to the reader. But we have that kind of in place, so we've got that wired up.