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

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


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.