Typing Actions & Reducers Exercise

[00:00:00]
>> I got it wired up with some amount of side road trips there to the point where we got the RGB. Your, I'll push up this branch and we have one they'll kind of drop in that's a steady state as well. I'll push it both alive coding on the steady state just to make sure.

[00:00:16]
And good job is to choose your own adventure at this point and we'll put it on the screen for perpetuity. Is to, let's see. We pass this fashion as a prop here we are. You can get, you can follow me down my path. Get one or the other, either HSL or HSV is working right and kind of just again, follow the path I put in the code I'm about to share in the chat.

[00:00:48]
Or I'll have the branch up here as well. Or if you wanna try to get one of the color change swatches working, the idea being that when I click on any of these colors, it should change. Right and so that's an onclick event. Should, that one just takes the hex code, so you don't have to worry about the trials and tribulations of my third party library.

[00:01:07]
But you can click on one of these and it should change the color as well. So those are two different things. You can either get one of these rows or you can go ahead and try to get click on one of these to change the color. It's the same basic idea.

[00:01:21]
It's passing dispatch down. Through an intermediate component make sure it's typed correctly make sure you have the action, right, that seen all the fun autocomplete happen. So of the two missions that I'm gonna solve for, I'm not going to do the one that I did before, [LAUGH], right?

[00:01:44]
You're welcome to do that one. But I am going to go do the other one, which is getting clicking on one of those buttons to work, right? I have two real choices. I can get it working either, here or here, considering there's two of these, I'm gonna go this way also.

[00:02:04]
1989 Miami hotline, right? This color is called and this branch that I switched it to is called Aggressive Salmon. I chose it cause of the name, right? Cool, so kinda going through we've got this color reducer and got this kind of all in place. Let's go ahead and basically yeah, it's a little bit of a change but also slightly easier in some ways than the other one, which is to go into application.

[00:02:39]
We've got dispatch already. Do a little bit the same and like again part of threading it through is setting us up for like would be cool overdrive is the context API that great. But we'll get that set up. So following the red squiggly system it's like yo that's it's not a prop on save colors like yeah I'm gonna work down.

[00:03:00]
So here we can say, And we'll say, I grabbed the just kind of a base branch for starting this and this one's called collar actions. I do you need to pull this in, which is better than the one that had like a similar name? So we got that we can pass it through and we'll take this.

[00:03:30]
And you can see we get the nice typing from everything and we'll get all the auto complete. Everything's gonna be good. So we've got this saved color. And let's see on here can we do the ad click, but we have to pass that through, we have to pass it through again.

[00:03:46]
And you could argue, could you do an on click handler on here and pass it through. I will show you how to do that in a little bit. I promise you. Follow the red squigglies, second album name. Color actions. And then on the button, that's the remove button.

[00:04:19]
We've got one more thread. We could probably do it in here too. I want it usable everywhere, else it, Will dispatch. And then we have the object where we get all the autocomplete type. Update hex color. Now, since we're working with the hex color I shouldn't have any of the issues that I had before.

[00:04:50]
Famous last words, right? All right, so let's see how that went. So we got the on click on the color change swatch. Can I have, we did. If you don't put it on these they don't work. And it all works everything's good and you can see all my complimentary and try colors change as well.

[00:05:17]
Because it's all being created from there 1989 Miami hotline. And so for funsies, you can also wire these up. I'll give that a sec sorry so Raiders the same basic idea. That you can kind of pass these through and use them.