React-redux-universal-hot-example: Why the container components has lot of markup ?

[krishnasaga]

from article by Abramov https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.gqy6bmbp3

"May contain both presentational and container components** inside but usually don’t have any DOM markup of their own except for some wrapping divs, and never have any styles."

But in this source code all the container components has lot of DOM markup. If I'm not wrong the purpose of container component is to provide the behavior of the component but not presentation.

[svrcekmichal]

Hi, if you do @connect(...) to some component, you are creating new component. If you are using react dev tools you can see it like this:

<Connect(Smart)>
  <Smart>
    <Dumb/>
  </Smart>
</Connect(Smart)>

I believe Connect(Smart) and Smart components are called containers (or smart component), because they are carrying all the logic how to transfer state to props(in connect decorator).
It's good to point out word usually from @gaearon article, In my applications, most of the time containers have logic how to distribute data to dumb components.

As you can see https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/containers/About/About.js is is container, because it is connected to redux. But you can see that MiniInfoBar, is not connected, it is getting data from redux.

To be clear, you can refactor most of the containers logic to component, but in most of the application you have to find the point, when you really need to split component to 2 or more of them. I personally start to think about that if component is longer than 100-300 lines, have to much logic inside or because it is reusable component.

I hope I helped you.

[justingreenberg]

example of container component without markup:

https://github.com/davezuko/react-redux-starter-kit/blob/master/src/routes/Counter/containers/CounterContainer.js

as @sagar12861 alluded to, idiomatic redux containers simply connect presentational components with the store and do not contain any jsx. the codebase could be improved in this respect.

[gaearon]

From the same article 😉

Don’t take the presentational and container component separation as a dogma. Sometimes it doesn’t matter or it’s hard to draw the line. If you feel unsure about whether a specific component should be presentational or a container, it might be too early to decide. Don’t sweat it!