-
So if you recall back to a couple of lessons ago, we briefly mentioned that the share method on the view property of our HTTP context
-
is different than passing state directly into our page from the render method. So passing state in right here is different from doing view.share
-
and then passing our movies in there. So to start out with, let's create variables in both of these. So let's do state example equals state info.
-
And on our share method, let's do share example and the value for this will be share info. So that we can visibly see what these two are doing, let's add a bunch of usages for these. So within our homepage,
-
let's go ahead and add both of them in. So we'll inspect our state example and our share example. Let's give this inspect a copy and let's dive into our movie component
-
and let's drop this at the end of this component right down here. Give that a save. And let's also jump into our navigation partial and we'll drop it at the end of that as well. Okay, so with that in place, let's dive into our browser
-
and we see our inspect calls. The one here at the top is the one that's within our navigation file. The one right here is the one that's directly on our homepage. And then the ones below our cards
-
are inside of the component. The first thing that we're gonna notice is the one directly on our page is the only one that has our state example populated.
-
The other two, the one inside of our nav partial and the one within our card components are undefined for our state example. However, our share example is populated
-
across all of our inspect calls. So no matter whether it's in our navigation partial, our homepage, or even our card components, our share info is populated A-OK.
-
That's because whenever we pass information into the state of our page, so whenever we pass that object into the render method as our second argument, that is only getting applied directly to the page itself.
-
It's not available anywhere outside of that page unless we explicitly pass it into whatever that particular thing is. So for example, if we were to hide our browser back away, dive back into our homepage
-
and inside of our movie cards, if we were at the end of this to pass in our state example, now we're passing our state example from the state of our homepage
-
into the props of our movie card component where it will then be accessible. So if we dive back into our browser, we can immediately see that the state example is now populated for each of our card components.
-
But if we scroll up, it's still not populated within our navigation because we're not explicitly sharing it within our navigation. So that's the behavior of state. It's only going to be accessible
-
into the direct thing that you're passing it into. Again, as a reminder, if we dive into our movies controller, state is this portion right here. It's the second argument to the render function.
-
And then share in turn defines kind of a global for this specific view instance that we have for this request. So whenever we share something, we don't need to worry about it
-
leading into another person's request because it's going to be specific to this particular HTTP request. So if you have something like user information that you need to make globally available
-
throughout EdgeJS for your application, share is where you would want to do that because it will define it as a global for the specific view instance
-
that you're working with for the HTTP request.
