Advanced State Management in React (feat. Redux and MobX) Coding Flux: Using the Store with a View

Transcript from the "Coding Flux: Using the Store with a View" Lesson

[00:00:04]
>> Steve Kinney: All right, so what we'll do is we will, let's use the container pattern, right? Because this application is tiny, right? We're back on master, where it's the application that just does a few things. What we'll do is we'll wrap it in an application container that's going to listen to the store, and do all the things, and tell the PizzaCalculator component.

[00:00:30]
>> Steve Kinney: Cool, so here is Application, which is eventually gonna be what we export. But let's go ahead and we'll actually, let's make this PizzaContainer object again.
>> Steve Kinney: PizzaCalculator extends Component
>> Steve Kinney: And really, the thing we care about here is this up here.
>> Steve Kinney: So we'll take that, we'll render.

[00:01:18]
>> Steve Kinney: We gotta return.
>> Steve Kinney: And we'll take in everything that it needs.
>> Steve Kinney: All right, very cool.
>> Steve Kinney: So what we'll end up doing here, we're not gonna manage the state any more cuz what's managing the state for us?
>> Steve Kinney: The Flux Architecture Store, action, so on and so forth.

[00:01:53] So let's get rid of all of this, cuz we're not doing that anymore. We're actually gonna keep these, but we're not gonna set state anymore.
>> Steve Kinney: All right, very cool.
>> Steve Kinney: We'll hold on to some of this for a second.
>> Steve Kinney: All right, so what we probably wanna do is, let's pull in,

[00:02:27]
>> Steve Kinney: Application is gonna pull in that store that we made before, so we'll do that up here.
>> Steve Kinney: Right, the PizzaCalculatorStore is gonna need one more method on it. Which is here we can change the number of items, but what else are we probably wanna get? This is wrapped in a closure, we don't have access to the calculator, right, so we wanna just give ourself a safe getter method for it.

[00:03:00] So we'll just give it one called getState.
>> Steve Kinney: And it'll return the calculator, right? We'll be changing that with these events, but at any given point, we're gonna wanna get it out. All right, very cool, go back to the application. So initially, the state of the application,
>> Steve Kinney: Let's get the state.

[00:03:33] So now when the components mounts, we wanna start listening to that store, cuz it's saying, hey I changed, hey I changed, hey I changed. Right, we're not passing stuff in. All of the examples we've used so far today are, some other bigger component at the top of the hierarchy is passing stuff in, right?

[00:03:48] This case we have this thing floating in the ether, right? This store that we can now pass to any component anywhere in the hierarchy, right, whether it's down below, up top, anywhere. All right so let's go ahead and let's start listening to that store, so we'll say,
>> Steve Kinney: componentDidMount.

[00:04:11]
>> Steve Kinney: We'll say this.listener.
>> Steve Kinney: Actually what we'll say is, we'll give it one called updateState.
>> Steve Kinney: So when it starts, we'll say PizzaCalculatorStore.on('change', this.updateState).
>> Steve Kinney: And we'll update calculations. The other thing we need to do is, our application is never gonna unmount. But if you have things that could enter and leave the UI, you have to take off your event listeners.

[00:04:48] Otherwise you have a memory leak, right, cuz they won't get garbage collected. So when componentWillUnmount, we'll say PizzaCalculatorStore.off('change', this.updateState). Right, so when it mounts, we start listening, when it unmounts, we stop listening. All right, cool.
>> Steve Kinney: So whenever we call updateState we'll say,
>> Steve Kinney: this.setState, and what it'll do is we'll just start listening for PizzaCalculatorStore.getState().

[00:05:44]
>> Steve Kinney: Right, it had numberOfPeople and it had slicesPerPerson. So we'll get that object in every time, we'll update both of those whenever in emits a change event. All right, cool.
>> Steve Kinney: One thing I'm gonna do is, we're gonna have to put actions here in a second. The only reason I kept these is because I don't want to do this.

[00:06:04] I feel like getting the event object and parsing out the value and turning it into a number can happen in my view layer. I don't wanna have to worry about that kind of stuff. I want to just get me the value and let me know what to do with it.

[00:06:15] So I'll keep that here for now.
>> Steve Kinney: So on updateNumberOfPeople, let's pull in all our actions.
>> Steve Kinney: So this'll pull in basically an object called actions that's gonna have all of the actions in it.
>> Steve Kinney: And so what we will do is we'll say, updateNumberOfPeople. We will get the number of people and we'll say actions.

[00:06:49]
>> Steve Kinney: updateNumberOfPeople.
>> Steve Kinney: updateSlicesPerPerson.
>> Steve Kinney: Right, again, this is somewhere aside from our application, it's not the thing that we're mounting. It is floating next to our application. This could be all the way down the component hierarchy, this could be up at the top, it doesn't matter, right? We can pull this in and we can hook it up to anywhere in that tree, and that's really powerful.

[00:07:19] All right, so then we did wanna return that PizzaCalculator.
>> Steve Kinney: And so in my state right now I have numberOfPeople and slicesPerPerson. So I'm actually gonna give that all,
>> Steve Kinney: To the PizzaCalculator, so those two things will be passed in as props. What this will do is it'll take the two objects on state and pass those in.

[00:07:46] And then we can say updateNumberOfPeople.
>> Steve Kinney: And we can updateSlicesPerPerson.
>> Steve Kinney: Cool, and reset.
>> Steve Kinney: Oop, did I lose my reset along the way?
>> Speaker 2: You removed it
>> Steve Kinney: What a jerk. Well that one doesn't take any arguments, so honestly I can just.
>> Steve Kinney: Cool, so again, I can now put this component anywhere, right?

[00:08:29] It is totally separate from the rest of the hierarchy of my,
>> Steve Kinney: Of my app. Probably wanna pass in numbers.