Transcript from the "Reactive References" Lesson
>> So, here's the thing. We have a regionName. We have the Pokedex. This all looks pretty good. Except if we take a look at this actually, and let's say we wanted to change the regionName. This is actually pretty common. So let's say we wanna say let's do an H2.
[00:00:17] And this is a regionName. There we go. We see console here there we go. Now it's not being clicked, okay? So if you wanna change this you might be thinking well, okay, I know what I'm going to do. I'm going to say inside of will create a method here, just to make things very clear.
[00:00:36] In this has changed regionName. And then this .regionName is gonna be equal to Hoenn after this. Alright, and then we're gonna do is wanna create a button. Actually now that's gonna be at the bottom of a very long list equals change regionName. And then change regionName save. Okay, so far, again, just to recap, we wanna be able to change the regionName.
[00:01:05] So we created a button that runs its function that should, as we've been practicing already, just change canto to Owen. So we say that and click. You'll notice that nothing is happening. And this might feel weird because after all isn't this what we've been doing this entire time?
[00:01:57] Well the way we do that is actually by using view helper methods. And so we mentioned that earlier were a really popular thing that with view three is the ability to parse out different functions to kind of help people use it in different context. Well, there is a helper method for turning something into a reactive reference.
[00:02:15] And the way we do that is we import from view. And we D structure out this method called ref. Again, if you think of ref think of reactive reference. And so how does that work? Well, what we do is we actually just wrapped the value that we want to be reactive inside of this helper method that's what we do.
[00:02:36] And so now if I refresh this and we change it, you'll notice it's now actually being tracked by view. And so this ref and a lot of the content we'll be talking about is actually really critical because going forward, whenever you're working side of composition API, you have to be very explicit about when you want view to introduce metric.
[00:03:09] Composition API is your ability to get at the primitives and say okay this is stuff I wanna do and then view do your magic for this kinda stuff. And so for example right, if we wanted to say let's actually have ability to have like an all caps regionName.
[00:03:23] Well, the way we can easily do that is you can have a computed property. That's how I would approach this. So we'll say region all caps. And actually, I'll just be more specific region name all caps. And what do we need how we need a computed property. And guess what the helper method is computed.
[00:03:39] So we have a computer property, but what we need to do inside of our computer property is we need to run a function. Because we look back at our other apps that use computed. Let's go back into another component that uses it. You'll see that all of our computer properties actually are functions, which makes sense because they need to run a computation on the things that are dependencies.
[00:04:00] So, we have an error function in here, and what are we gonna do? We gonna go ahead and we're gonna return, just like we did before, we're gonna return the region name to uppercase. This is probably our first instinct as far as how we would make this work.
[00:04:14] And so to make sure this works, we've got to make sure we return this to regionName all caps. Just like that, and then let's go ahead and expose that here as an H3. RegionName of caps, just like that. And we'll save. And you might notice that well, something's broken.
[00:04:35] What's going on? Well, it's in regionName but to uppercase is not a function. You might be thinking This is weird, but RegionName is a string, right? It's not. Yeah, it's not a string anymore. It is now a reactive reference, which actually some of you have noticed when you're doing the inspecting the element.
[00:04:55] Let's go ahead and actually log regionName at this point and see what we get. If I refresh that, that's fine, we get a massive error. And you'll see things like the ref implementation. You also might have seen as well when you're doing the options API you saw proxy show up when you would log out a value.
[00:05:14] And I know that was confusing for some people because they're expecting to just see what the value actually is. But one of the big rewrites of view three when it came to the reactivity engine is that the jobs skip proxies underneath in order to manage how all the dependencies are being tracked.
[00:05:28] And so again, you don't need to understand how proxies work, for you to be familiar with, or basically to work with view. But in case that's something you're interested in, I just wanted to give you sort of like a little bit of a preview of that so that you can always dive into that if you wanna learn more about.
[00:05:43] But you'll notice here that once again, regionName is not a string. What is it? It's a rough implementation because it's a reactive reference. Meaning, the way we actually get to the value of it is actually to basically think of it as an object now. It's an object that has the ability to update it, its dependencies.
[00:05:59] And so when we actually want to access the raw value of a reference, we have to actually unpack the thing. And the way we do that is by saying .value. And you'll notice once you do that everything works. Now, this might feel a little bit odd after using the options API for a little while, because, after all in the past are actually not even the past.
[00:06:21] If we wanted to, we could have theoretically created a computer property at this level. And just for the sake of having comparison, this will be regionName lowercase. And so what we do here is return this regionName .tolowercase just like that. And then we'll just add another H3 regionName.
[00:06:42] All okay no it looks like it's just lowercase. Yeah okay save okay. So, that happens to work. Let me see. Let me have a differentiator here. There we go. Okay, sentence case all case okay. So you might be thinking, well, this is way nicer, right? Like, why do I want that value?
[00:07:22] And so we think about cons regionName. The fact that you actually have to unpack the value does signify to people that when they're working with this particular value that it's already attached to the view reactivity. That said, I wanted to give you the pros of how people see that because a lot people do like ref.
[00:07:36] But in the event you're like, I really don't like ref. What you can do instead is you can do this helper method called reactive. And so what reactive is is basically think of the data option from the options API package in a nice little helper function. Because earlier there was a question regarding around the fact that what if I don't like the name data?
[00:08:00] What if I wanna call it state? Well, we can state, it's a reactive object. And inside of here, let's just say I'll just do region two and I actually don't know a third region. It's fine okay I'll just do element type I would say lightning okay? So, when you're doing the state first of all I'll go ahead and log out state.
[00:08:32] What you end up getting is something that looks like a lot more of what people are probably expecting when they're actually expecting element which is the proxy. This is what we've seen earlier when we actually inspected the options API element in that you have to look at the target in order to get underneath it.
[00:08:49] But what's nice about this now, is that, again, this is gonna be misplaced, but if we do state.element.type.touppercase and run it, you'll see it actually just works. And so the way the thing of reactive is, it's like a nicely packaged way of collecting a rest together and that you don't have to unpackage it with.value.
[00:09:15] And so there are plenty of code bases I've seen that people never touch ref they'd like state or sorry they like reactive. Because reactive feels like composition or sorry feels like options API, but you're in the composition API's setting. And so is there a right or wrong way to do this?
[00:09:31] Absolutely not. So for the sake of having this example also be here, I'm just gonna say element type all caps, and then we'll make sure to return this here, make it alphabetical. And then I'll just make sure it's here. And then we should be good okay. So, there we have it.
[00:10:26] With something like this, however, when it comes to the composition API, as you can see, there's a lot more going on. You need to understand helper functions. You need to know about modules. You need to go ahead and make sure if you're using ref that it's a dot value, that the skill cap jumps considerably when it comes to the amount of jobs you need to know in order to be productive with competition API.