CODEWITHSUNDEEP
reactjs
Mozak
Mozak

Reputation: 2798

What to keep as presentational and container in Reactjs?

I am using React and Redux.

I have a question regarding what to keep as a Presentational and what to keep as container component

I have an App, which will have 3 sections

  1. A carousel of banners
  2. A collections for campaigns, each campaign will have products
  3. A brand collection where each brand will have certain products

And products will have an action i.e. Add to Cart and same products can exist b/w Brands and Campaigns

3 API's are available one for each for getting data.

<App>               ==> Presentational
    <Banners/>      ==> Container
    <Campaigns/>    ==> Container
    <Brands/>       ==> Container
</App>

Is my approach correct on this?

Upvotes: 1

Views: 61

Answers (3)

Shota
Shota

Reputation: 7360

You should keep components Presentational or Container as they end up to be. What I mean with this is that the context of the problem is more important than conventions.

In your case, let's take component and see how it will end up after connecting:

<App> 
    <Connect>
        <Banners someProp={someDataFromStore}/> 
            <Banner> <Banner/>
        <Banners/> 
    <Connect>
    // ... other components
</App>

As you can see if you need someDataFromStore up in the component tree (App) or in other sibling components (Campaigns for example) you should connect it on a higher level, however, in some cases, it is better to connect them separately to avoid too much passing props down.

So the main point is to keep data flow as smooth as possible and to keep a single source of truth when it comes to data manipulations.

Upvotes: 0

Krasimir
Krasimir

Reputation: 13549

I don't think that you should categorize in presentational/container groups based on content. Your question makes me think that you're splitting them based on what these components contain while you should be asking yourself what are they doing. I could easily find a presentational layer in every of these four components. For example the App may contain some layout grid markup which could be extracted or the banners for sure have some presentational markup because of the carousel.

My understanding for container is a component that knows where the data comes from and its structure so it can use it and pass whatever is needed down to the presentational component.

Often the presentational components have generic names like <GridColumn>, <NavHeader> or <CardTitle>. All these components above are really context specific so I would call them all container components.

Upvotes: 1

Mike
Mike

Reputation: 6239

I think ultimately there is no "right" or "wrong" approach, it's simply a case of what works best for you.

If you are wanting to maintain a separation of container and presentational components, then as long as you stick to the principals you can compose your application in any way that makes sense.

E.g. I have presentational components that have container components composed within them - at some stage down the component tree there will be a purely presentational component that knows how stuff should look given its props and passes off event handlers to the container that controls it.

In the context of your app, this may look like:

<App> // Component provided it is simply composing other components and has no state etc
  <BannersContainer/> // I assume that this is going to hook up to Redux actions and state with react-redux and may wrap a presentational <Banners/> component?
  <CampaignsContainer/> // As above, except wrapping presentational <Campaigns/> component?
  <BrandsContainer/> // As above except wrapping presentational <Brands/> component?
</App>

Then within your <Banners />, <Campaigns /> and <Brands /> presentational components, they too may compose themselves of both presentational and container components, depending on what levels of your component tree you may want to further hook into Redux state at.

Upvotes: 1

Related Questions