React + Redux set up for my react-native app. What is the correct way to handle connect?

Question

I am building a simple react-native app using react-native-router-flux library.

I have only 3 scenes:

• Home
• Search
• Favorites

I have defined them as such in my app.js as such:

<Router>
  <Scene key="root">
    <Scene
      key="home"
      component={Home}
    />
    <Scene
      key="search"
      component={Search}
    />
    <Scene
      key="favorites"
      component={Favorites}
    />
  </Scene>
</Router>

In my setup.js, I have the following:

<Provider store={store}>
  <App />
</Provider>

My question is whether I should be connecting each component (Home, Search, Favorites) to the store, or if I should be doing that in my App (app.js) component and passing actions and state as props to each Scene component.

I have the following actions:

• getRecent()
• searchByKeywords(keywords)
• searchByCategory(categoryId)
• addToFavorites(photoId)
• removeFromFavorites(photoId)

And the following reducers:

• photoResults
• favorites

Please let me know the best way to set up here. Should I connect to the state and actions in each component, or do it once at the App component level (where the Router Scenes are defined) and pass down.

function mapStateToProps(state) {
  return {
    photoResults: state.photoResults,
    favorites: state.favorites
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actionCreators, dispatch)
  };
}

Answer 1

The approach I've been using is to split the app into smart and dumb components as Dan Abramov explains here. I then use connect to feed the state into the smart components and pass props down to the dumb ones.

This allows you to reuse the dumb components in many places as they are not tied to a specific state.

Answer 2

Should I connect to the state and actions in each component, or do it once at the App component level (where the Router Scenes are defined) and pass down.

The best practice is to call actions in component level. makes the store globally accessible. All you need to do is to call action from your component. This is important to ensure the modularity of your app.