Passing dispatch as a Prop

[00:00:00]
>> Before I showed you how passing that set state was a little bit of a pain, I told you, if you use dispatch, it's a little bit easier. Let's actually see what that looks like. So if we want to pass it in, we've got to do a little bit of prop drilling.

[00:00:11]
So we've got to pass it from application to adjust colors, and from adjust color to that RGB inputs, right? And part of the reason that we're going to go through that extra layer of indirection is so I have an excuse to use the context API later. But we'll go through it.

[00:00:27]
And so we also have to adjust some of the different props along the way. So your choice on how you wanna refactor, you refactor from that RGB input on up or you're gonna refactor from the application on down. The good news is that the like happy union of React and TypeScript is going to help you along the way.

[00:00:51]
So I'm gonna say that we're passing dispatch, will say dispatch. Great. Cool. And so now we'll pass this through and we'll say, we'll go into this one. And we'll say that we wanna add the fact that it will take dispatch and pull it in from react. Now, it does exactly what kind of action, right?

[00:01:26]
So one of things I can do here is I can take, I will probably very similar to what you saw me do right here. Like, I need this type. I do not wanna type it over and over and over again. So what I'm gonna do is- Just store it in this type here and we'll swap it in here and we'll go back If you don't export things, you can't use them.

[00:02:08]
Someone asked before, when do I make the decision on whether or not to put something in that definition file or import it all over the place? Yeah, if this app grew anymore, and like the idea that I'm probably going to need something like this for select color, I'm probably gonna need this somewhere else as well.

[00:02:28]
I will show you a trick where I won't need it later. But for now, you're gonna assume that you're gonna go down this path, you'd be importing this all over the place for a very common thing, right? So what I could do in this case, and I'll just show you because it can be done, is I can go into any d.ts, I can paste this in here and you'll notice that it is now available- In basically any file.

[00:02:55]
So now I can go into this file over here just to show you I didn't have to import it anymore. It's just available, right? And in fact, if you wanted to you could actually even pull in the full react at this passion have like, you can get abstract this as much as you want.

[00:03:15]
Of course we have that in place and then finally we're gonna go into hex to RGB. And there's two things that I could do here and I'll show you is I could say that it's- Copy and paste got a little carried away there but that's cool I got the important for free anyway.

[00:03:40]
Sweet, save some files.
>> [INAUDIBLE]
>> What's it?
>> Options.
>> Yep. What did I leave in that other file for myself? Just colors, yeah, I made a mistake, over here. No wants this, just call to actions. Pass it in as a prop here as well. Cool, as you can see like my red is turning various shades.

[00:04:31]
Interesting it doesn't have this one, reaction here. I don't make the mistake didn't. Cool and so like other than me not using it here, I can pull this all in. And I need you to do a little work because these are three different values in here. So I've got as you can see some values here as well.

[00:05:01]
And so what I'll do is just say, let's give ourselves a helper function. Red would be r, G will be green, green will be j and then. This is gonna take these three values I'm gonna turn it into array and send it off. And so what we'll do here is we'll say dispatch, will set the type.

[00:06:02]
We're gonna take a look at that in a second. Take a look maybe my ad hoc moving that out into different files not my best choice. We'll find out in a second. These weren't available in that other file cuz these are not exported. So my whole thing is like let me drop into that file as a surreptitious like bonus thing that was gonna do is totally we can take a look at that but like maybe not while I'm in the middle of another thought.

[00:06:34]
Cool. I guess I could move them all in and that would solve for that. But while I give you something to do, then I will go move the file and verify it works in like midway through trying to make a point. Cool, so now everything makes sense a little bit more.

[00:06:51]
So I should be able to go into application. If I look at this, dispatch is now what I think it is. It gets passed through, it goes to index. I don't know what this is, that makes sense. So let's pull it in. Nope.
>> I didn't think you exported it though.

[00:07:12]
>> Did I not export that one while I was talking?
>> This is why we don't wing it.
>> There we go. All right, so now we're exporting everything. Now I should get all right. And we go through. What you angry about? Figure out a second, let's get everything else wired up.

[00:07:38]
Cool. Yeah, now I know things are working. All right, again, sure was that my finest moment. No. Did I have to like go and flail wildly in the browser to see things didn't work? I just saw that like, hey, I'm not getting autocomplete. That's a signal that I have probably flew too close to the sun while live coding, so here we can see that the payload.

[00:08:08]
And what's nice if I hover over I can be reminded about what format this looks like. So I can actually say- And that wants it in an RGB object, which I remember. But what's nice is that like, should be an RGB number is not assignable to either one of these two.

[00:08:39]
Cool and now cuz I have no red squigglys, I can at least figure out that mostly everything's okay in here, let's go back up and see what our problem is. The same problem that I had before which is one bad naming decision. You know what? I'll just grab the other one.

[00:09:13]
If you misspell things, your code doesn't compile. So now I've got no red squigglies which gives me some confidence that I can go to my browser and see. And again, the nice part is I am in the zone. I am looking at my code, I am seeing the errors immediately, and I can kind of address them versus I wanna tell you how it sometimes goes.

[00:09:38]
And then we gotta say on-change in here. So if you don't put OnChange handlers, nothing happens. So onChange will tell you the event. And this time we actually use a number again, great. But this time we actually want it to be a string. So like for the thing that was complaining about the whole time, that value as numbers saved us from, we want that this time.

[00:10:11]
Now we actually wanted to be a number, so that's not true. I will say, cool, say update. I could dispatch the action for you too but I made that helper out there. Update RGB and here we'll say event.target.value. You make one coding mistake in front of your friends, next thing you're embarrassed.

[00:10:41]
Value is number and that's actually got to be the, let's look at the air like I know what it is but it's like yo you're saying this red is number undefined green number undefined or blue, so actually say- Red will be our target value. Blue will be b.

[00:11:05]
Green would be g. And we can grab this and just adjust it slightly. We'd turn them all the same. That's not fun. There's probably a better utility function I could write for that, but that'll do the trick for now. So my issue is- Red, green, blue.
>> It's because you have them in the wrong order.

[00:11:56]
>> This should just be weird, it shouldn't like- Because it objects shouldn't matter, I got no red squigglies, let's see what we got in the second. Now the best laid plans, right? I want the record to show it was my first intentional console log of the day. And we'll see what my issue is.

[00:12:36]
It's probably the stupidest thing again. So got those colors coming in correctly. Invalid color string in the HSL1. That's fun. Give me one second, I'll to trace it down. It looks like it's going through the reducer fine, it's maybe my output or something I wasn't validating just yet, I'll figure that out.

[00:13:12]
You're gonna watch me though, it'll be fine, it'll keep me honest. Which is ideally, let's just out of pure curiosity. Let's look at like what we get out of application on each render? Wanna play a game? So I made this slight meta point earlier, of I bet we can make that hex color type better, right?

[00:14:09]
And this is a later chapter in this workshop, but let's talk about it now cuz I got beaten by it. So we start out with hashtag BADA55, that's cool. We see it twice because like React 18 has concurrent rendering. So console logs show up twice in a render.

[00:14:31]
It's not actually rendering twice, it's under the hood react. So you'll see a one's coming from the VM, one's coming from an occasion jsx. On the next render, one of these things is not like the other. Which is, this one starts with a hashtag and this one starts with a string.

[00:14:47]
I mean, this one starts without a hash, it's just a string. And when I say that hex color is in this case a string, TypeScript's like, yo, I did my job here. And like that is definitely, it's doing its job. That doesn't stop me from forgetting that the library that I'm using expects, when it takes a hex code, the library is expecting all hex codes to start with a hash, not my code.

[00:15:16]
I forgot that. And thereby the code crashed. So the fix the really like illustrious fix is watch this. Now, get to get to show off here with the pound sign and you'll make a new mistake. Great, so yeah. I guess there is a cautionary tale here that TypeScript will solve 90% of bugs but not all of them.