Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Container Pattern Demo" 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 codes an example demonstrating use of the container pattern.

Get Unlimited Access Now

Transcript from the "Container Pattern Demo" Lesson

[00:00:06]
>> Steve Kinney: So here is the counter that I made in the previous example. And you can see that it both,
>> Steve Kinney: Handles its own state and also handles the presentation, right. And so with the container pattern, our sole job is for separating up the two of those. Right, which is not doing the same thing in one component, right?

[00:00:26] Cuz then we could have the stateful version, we could have the presentational one, and we can use them together. And this, we'll see when we get to some of the other patterns, is useful if you have two components that look very different, but take the same state, right?

[00:00:39] Like the user profile might take the user but also the notifications might need the user. Right, we can kind of begin to use these containers in multiple places. So, implementing this is effectively just a little bit of cut and pasting, right. First thing I'm gonna do is I'm actually gonna take most of this component and copy it all into the container.

[00:01:03] Cuz most of this component is the state management, right? It's setting the initial state. It's handling increment, handling decrement, handling resetting, right. There is a little bit of mark up in here. So I'll take the entire thing at first. And I'm just gonna copy it over to CounterContainer.js which was intentionally left blank, but no longer.

[00:01:26] And what do we name this one? Counter container. So counter container is going to handle a state, but then what are we gonna use to like actually be the UI for this counter?
>> Steve Kinney: The counter component that we had before. So we'll have to bring that in.
>> Steve Kinney: So bring in the counter.

[00:01:56] We have all the state, and then effectively what we're going to do is,
>> Steve Kinney: We'll give it the counter.
>> Steve Kinney: And we'll say onIncrement is this.onIncrement. onDecrement, wanna take a lucky guess?
>> Steve Kinney: this.onDecrement and on reset,
>> Steve Kinney: Unfortunately, in the other example I just decided to call this one reset, and I'm gonna have to live with that decision.

[00:02:32] Otherwise do needless refactoring in a real life coding situation which will probably never work out. And we'll also say that the count is equal to the account that we pull from the state. So now the actual counter is not gonna be in charge of managing any of its own state.

[00:02:47] It's simply going to be a vessel for the state from the container. So we'd get rid of all of this.
>> Steve Kinney: And we'll hit Save. And then going back to counter.js, I don't need to managing that state, this is going to be a component that just renders. And counter is not gonna come from state anymore, where is it gonna come from?

[00:03:09]
>> Speaker 2: [INAUDIBLE]
>> Steve Kinney: Props, right? Cuz everything that's needs is being passed in to it. It will also is gonna get onIncrement, onDecrement, and onReset, which I did name correctly in this case. We'll see. [LAUGH] I felt confident that I did until you asked me, did you. Yeah, I did call in onReset.

[00:03:38] I win. Cool.
>> Steve Kinney: And we'll pass that in. So this component receives everything it needs. If you needed to test this, you could pass in two mocks, or three mocks in this case. [INAUDIBLE] make sure the right one got called, you could pass in some state, you can actually get a working version of this component without having to first invent the universe in order to have all the state that you need.

[00:04:04] So this makes testing, and again this is a very simple example but imagine this was deep in your component tree and that state was coming from some place far away. In order to test that component you'd have to recreate that entire chain, which you know what that means?

[00:04:19] You're not going to be test that component, right? [LAUGH] Because when testing is hard, we don't do it. Finally, we have one other change to make. The application will now grab the counter container. So the counter. And now it is time for the live coding reveal to make sure I didn't make a mistake somewhere.

[00:04:44]
>> Steve Kinney: And I did? Let's see. So we have the counter container, make sure all my files have saved,
>> Steve Kinney: These are getting passed in as props.
>> Steve Kinney: Slightly embarrassing.
>> Speaker 3: [INAUDIBLE] state of count
>> Steve Kinney: What's that?
>> Speaker 3: [INAUDIBLE]
>> Steve Kinney: Yeah.
>> Steve Kinney: Let see.
>> Steve Kinney: So bring in the counter.

[00:05:33]
>> Steve Kinney: And what I'll do is I will,
>> Steve Kinney: Chrome sometimes, if it's undefined, doesn't show anything. All right, so I can see that this is undefined. All right, that's questionable, right? So why?
>> Steve Kinney: Does anyone see why?
>> Group: [INAUDIBLE]
>> Steve Kinney: I called them handle increment handle decrement, and I typed onIncrement and onDecrement and so those are definitely undefined.

[00:06:06] So that's an easy fix.
>> Steve Kinney: The funny part is, I made that comment about reset and that I didn't use onReset, now realizing that I also-
>> Speaker 5: onIncrement, instead of handle increment instead of
>> Steve Kinney: Very cool.
>> Steve Kinney: And now it works as expected cuz I named the methods the right thing this time.