React + Redux set up for my react-native app. What is the correct way to handle connect?
<p>I am building a simple react-native app using react-native-router-flux library.</p>

<p>I have only 3 scenes:</p>

<ul>
<li>Home</li>
<li>Search</li>
<li>Favorites</li>
</ul>

<p>I have defined them as such in my <code>app.js</code> as such:</p>



<pre class="lang-jsx prettyprint-override"><code>&lt;Router&gt;
  &lt;Scene key="root"&gt;
    &lt;Scene
      key="home"
      component={Home}
    /&gt;
    &lt;Scene
      key="search"
      component={Search}
    /&gt;
    &lt;Scene
      key="favorites"
      component={Favorites}
    /&gt;
  &lt;/Scene&gt;
&lt;/Router&gt;
</code></pre>

<p>In my <code>setup.js</code>, I have the following:</p>

<pre class="lang-jsx prettyprint-override"><code>&lt;Provider store={store}&gt;
  &lt;App /&gt;
&lt;/Provider&gt;
</code></pre>

<p>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.</p>

<p>I have the following actions:</p>

<ul>
<li>getRecent()</li>
<li>searchByKeywords(keywords)</li>
<li>searchByCategory(categoryId)</li>
<li>addToFavorites(photoId)</li>
<li>removeFromFavorites(photoId)</li>
</ul>

<p>And the following reducers:</p>

<ul>
<li>photoResults</li>
<li>favorites</li>
</ul>

<p>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.  </p>

<pre class="lang-jsx prettyprint-override"><code>function mapStateToProps(state) {
  return {
    photoResults: state.photoResults,
    favorites: state.favorites
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actionCreators, dispatch)
  };
}
</code></pre>