Container/Presentation Pattern

[00:00:00]
>> Well, I think that kind of concludes the whole design patterns section of this workshop. So we talked about the module pattern, singleton pattern, proxy pattern, observer pattern, factory pattern and prototype pattern. But the next one is not so much on like the JavaScript design patterns are more on react patterns.

[00:00:15]
And these, I'll talk about how we can use different components, how their data is shared and just their relationship to each other. So, first let's talk about the Container Presentational Pattern. So with the container presentational pattern, we essentially have two components. I'm just going to make this real quick.

[00:00:32]
We have a container components, which is a component that's solely responsible for retrieving data. And then we have a presentational component which is solely responsible for showing data, rendering data. So because the container component is only fetching data, it usually doesn't like render any styled components, it just renders the presentational components.

[00:00:55]
So, when we look at the implementation here, this is using React hooks. By the way most of my examples I will use React hooks. I will also cover the hooks pattern so you can kind of see how the different patterns relate to how we can implement hooks nowadays.

[00:01:10]
So I do like assume that you know how hooks work. But if there are any questions about, like these basic like use of XQ state hooks, of course, do let me know. Yeah, so in this implementation, we have the listings container components and container components responsible for fetching data.

[00:01:24]
And we can see that here because it's fetching, like listings from an API or like a CMS sets the state to have those listings and then passes them down to the listings component. Are like that the presentational component. I feel like this should have been the presentational component this may be a typo in my end.

[00:01:41]
So what we have here is we have that listing container component that you saw before. So this one fetches listing from our API passes down to this listings component which here's just called listings which is probably why I made the mistake. But this is a presentational components. So in here it retrieves this the listings as props and the only thing he cares about is rendering that data in a styled way.

[00:02:05]
I'm just getting roads screenly. Yeah, so that was the container presentational pattern. Now, there are many trade offs or benefits to using this pattern. As you can see, there's definitely a separation of concerns. Because the presentational components can be just responsible for the UI. Like just the styling of how are we going to render that data.

[00:02:29]
Whereas like container components are just responsible for the state of the data of the application. Yeah, it's also super easy that way to like reuse these presentational components. Maybe they are using like different data sources different data but they're render the content the same way. So we can reuse this presentational components even though they like retrieve different data from props.

[00:02:53]
It's also nice if you have many presentational components that don't really touch the fetching logic. So, if you just care about the design or you maybe you're a designer, you don't really know what gets returned from the API. You can make a lot of changes to these presentational components without maybe accidentally like making a mistake with that data how data is fetched and all that stuff.

[00:03:14]
Now, of course like Hooks we will see later how Hooks kind of replace this pattern a lot of the time we don't really necessarily have to use this container presentational pattern anymore. Or as much as we had to when we used classes just because it was like more work to like create a class all that stuff but we will see that a bit later.

[00:03:31]
All right, so the exercise even though I kind of already showed you the solution here but we see an exercise here. So right now, we just have one component it's called the listings components. But then this component, it's not split up into two separate parts. We don't have like a container part or a presentational part, it's just one big component.

[00:03:50]
So what I would like you to do is to split this up into two components, a container components and a presentational components. So the container component responsible for fetching the data and then the presentational components responsible for showing the data. Now, you can I guess already kind of see I've already created the folder structure for you.

[00:04:09]
So you have like presentational here and then container here. So you can just type the container code right in the container listings file.