Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Container Pattern Solution" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Steve splits apart the component into a state container and presntational component.

Get Unlimited Access Now

Transcript from the "Container Pattern Solution" Lesson

[00:00:02]
>> Steve Kinney: Great, so let's go through this one together, right? So really the major goal here and we'll talk about some of the other like use cases for this so once we implemented it. But we want to separate out the stateful container from the presentational component. And it's effectively up to you, which way you decide to go about doing this.

[00:00:21] I would argue that in this particular case, it is easier to rip out the presentational part than it is to rip out the stateful part. So we're gonna go that route. I'm gonna do everything in the same file just for clarity so I don't have to jump around files.

[00:00:36] But we'll actually have the two separate very shortly. So it's called application now, which probably isn't the best name for it. But we'll take out this return part right here. And this is the part that I'm gonna need for the presentational component. And so what we'll do is I'll go up a little bit, and I'm just gonna say,

[00:01:00]
>> Steve Kinney: class PizzaCalculator
>> Steve Kinney: extends Component. And we'll give it a render method.
>> Steve Kinney: Cool, and we need to do a few things in here. First of all, I need to return that. So we'll return that component. All right, so ideally, numberOfPeople is gonna come in as a prop, SlicesPerPerson is gonna come in as a prop, as well as reset, updateSlices PerPerson, and update numberOfPeople.

[00:01:39] So let's get that ready.
>> Steve Kinney: numberOfPeople, updateNumberOfPeople, slicesPerPerson, updateSlicesPerPerson, and reset = this.props, these are gonna get passed in. And let's do a little bit of formatting magic here,
>> Steve Kinney: Or not.
>> Steve Kinney: 69, it does not like the fact that I have an empty return so I'll actually say PizzaCalculator.

[00:02:23]
>> Steve Kinney: And we're gonna give it everything that it needs. So we know that that is numberOfPeople.
>> Steve Kinney: We know that updateNumberOfPeople = this.updateNumberOf people.
>> Steve Kinney: slicesPerPerson, we pulled off a state.
>> Steve Kinney: updateSlicesPerPerson is on the class.
>> Steve Kinney: And reset so and so.
>> Steve Kinney: So let's try to format that again.

[00:03:06] All right, cool. So we've pulled this out separate, we have to change a few things in here. We've pulled in as props. We need to get rid of whatever this is because they're now getting passed in. Okay, so while I'm getting rid of whatever this is, number of pizzas can be passed in as well so let's do that.

[00:03:29]
>> Steve Kinney: Because that can get calculated from the state and passed in.
>> Steve Kinney: So this seems a little silly, right? Like, I'm not gaining that much, but imagine we're pulling this information from a server, right? It would be really hard to test that, in order to test a component that both showed the UI based on what it got from the server, as well as got the stuff from the server, you'd have to mock out a bunch of HX requests.

[00:03:57] Again, if testing is hard, you're probably not going to do it. So, this allows you to then be kind of passing the object that you would expect to get back from the API and see that the components works as you would want it. So also pull in that numberOfPizzas.

[00:04:18]
>> Steve Kinney: Let's say I will get that last to start reset out of here. Okay, so now the moment of truth
>> Steve Kinney: And we can see that it works. We can see that number of guests works. Check out slices per person.
>> Speaker 2: Use .updateSlicesPerPerson.
>> Steve Kinney: What's that?
>> Speaker 2: Line 79.

[00:04:52]
>> Steve Kinney: Yep.
>> Speaker 2: 79,79.
>> Steve Kinney: Auto complete failure.
>> Steve Kinney: Cool.
>> Steve Kinney: And we can now change the number of pizzas we have ordered, right? So again, in this case, we were able to separate the two of them. This is a lot more powerful when you're pulling stuff from an API, right?

[00:05:15] Which we will do later and we will make use of this pattern when we get there but we now know how to implement it, right? And now you can basically put any of these components anywhere in your app, they're gonna have the state that they need and then be able to render it.

[00:05:30] But you might notice something kind of limiting about this which is that these are definitely very tightly coupled. We have what we'll call the PizzaCalculatorContainer, it's currently called Application, but we could rename it PizzaCalculatorContainer and then export the application that has that one. But what happens if I have stuff with user data or with the pizza calculations that I want to use in multiple places in my app with multiple different presentational components.

[00:05:58] This pattern doesn't sell for that, right? It's a very simple to implement pattern but it doesn't sell for, I have this state that I want to test to multiple different kinds of presentational components. Which brings us to the next phase, the lightening round.