React. Is it bad if presentational components contain container components?

Question

According to https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.i63w9pvzw

Presentational components:

• May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.
• Have no dependencies on the rest of the app, such as Flux actions or stores.

I think if presentational components contain container components, they will get depend on Flux or Redux (or whatever the container components depend on).

That will make presentational components hard to test and reuse.

Answer 1

It's not bad, it's perfectly fine. The whole point of react-redux is to let you connect container components directly to the store without having to pass the entire store down every component as a prop. Component reuse isn't an issue, since the <Provider> component will make any connected container components work anywhere below it.

It's actually not hard to test container components either. You can make the connected component the default export, but also export the unconnected component as a named export, which you can use for tests, and manually pass it props in those tests. See the "Connected Components" section of the 'Writing Tests' part of the Redux docs for more info.

As for testing presentational components that contain container components, it won't be an problem. A shallow render will still work fine in tests (unless you're running into this issue). And if you need to mount the component in a test, you can always wrap it in a <Provider> component with a store specific to that test.

Edit: This answer is specific to Redux with react-redux. Other Flux implementations may have some difficulties with this I'm not aware of.