Hooks equivalent of container components in React Redux

Question

I am new to using react hooks api. Earlier I used to distinguish container components and presentational components. The project directory structure was according to this distinction.

Container components used to inject store state and action creators to the component through props.

With hooks I have been left clueless how the directory structure should be and whether the hooks should be injected to the component through props or simply imported inside the component.

Should there be a containers and components distinction.

The redux documentation which describes container and presentational components also doesn't seem to be updated for hooks.

Any relevant article or answer is welcome.

Answer 1

About the separation between container components and presentational components, Dan Abramov (working on ReactJs, co-author of Redux and Create React App) wrote this in Presentational and Container Components :

Update from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separate complex stateful logic from other aspects of the component. Hooks let me do the same thing without an arbitrary division. This text is left intact for historical reasons but don’t take it too seriously.

Answer 2

As user adel commented, there is now hook equivalents of react-redux stuff. To read redux state, instead of connect, you can use useSelector.

import { useSelector } from 'react-redux'

..
const somePieceOfData = useSelector( state => state.path.to.data )

About container components, you can still seperate your container, using react-redux hook stuff. There is nothing about that with react-redux.

Answer 3

I am also running into the same problem now and was looking for some nice resources in that , but here what I've reached: There is no big need for the distinction now between UI and container components, you can use custom hooks for the same purpose and you will have fewer lines of code and more readable one. From what I've read (i didn't experiment this yet) but it should have better performance as using functional components including custom hooks inc the app performance. Take a look at this : https://dev.to/jenc/discuss-react-hooks-and-life-after-the-container-component-pattern-5bn