Should I get redux store always from connect or pass it through props to children components?

Question

We have a large React Application and use Redux for managing data.

Currently we use es6 syntax and class components, we will use function based components and react hooks.

What is the best way to access the redux store in react child components?

1. Use the connect method from react-redux in every child component
2. Passing the redux state (in a component which use the redux connect method) an pass the redux state

through props to the child components?

Answer 1

Firstly the cleanest way is still to have container components for every component (functional or class).

You should only be mapping the bare minimum state from redux to any component which needs the redux state.

Now you should map every single component to redux? Well if the parant has everything needed in the child then it might not be worth mapping one of the child components. However, if you stick the first point and keep the mapping to a minimum then maybe the parents don't have the data and if so mapping the children might make sense.

By subscribing each component to the bare minimum, i.e having more mapped components, you will get less re-renders by default which is useful.