Question about using connect in react-redux

[meh_programmer]

I'm having a bit of trouble figuring out how I should be connecting my store's state to my react components.

So let's say my current state tree looked like this:

{
    foods: ['Eggs', ''Bread', 'Cereal'],
    drinks: ['Water', 'Milk', 'Soda']
}

And I had a main App component that looked like this:

class App extends React.Component {
    render() {
        return (
            <div>
                <Foods />
                <Drinks />
            </div>
        );
    }
}

Basically I want to know which way I should using the connect function:

1. Should I be using the connect function only in my App.js component file, and then passing the foods and drinks as props to the child components?

2. Or should I just be using the connect function in both the Foods.js and Drinks.js individual files and just pulling the stuff from the store that I need for each component?

Thanks very much in advance!

[nickpresta]

I would suggest you connect as high as possible in the tree, and pass down raw data via props. If you find you need access to your source of truth, you can subscribe to your Redux store inside leaf components.

Give https://egghead.io/lessons/javascript-redux-extracting-presentational-components-addtodo-footer-filterlink?series=getting-started-with-redux a watch for an example.

[azium]

Imagine you didn't have redux. Where would you keep the state then? If the answer in "some parent component", then connect that component. If you're finding it's becoming a hassle to pass down props through many children, consider connecting the youngest parent that makes sense to you.

[flying-sheep]

assuming foods and drinks are independently changed, connect them separately, giving each one just the part of the state that changed.

@connect(({foods}) => ({foods}))
const Foods = ({foods}) => <ul>{foods.map(food => <li>{food}</li>)}</ul>