Need help on some concepts about ReactNative and Redux and Navigator

Question

After several tests in this scenario, I have some questions that I can not answer my self, so I ask for help to clarify my concepts.

1. Provider vs props in Navigator

What is the difference and what is the best approach to setup the Navigator and pass store to different Scenes of a React Native app

export default class App extends Component {
  render () {
    return (
      <Provider store={store}>                        //<-- here
        <Navigator style={{flex: 1}}
        initialRoute={{ component: MainContainer }} //<-- here 

          renderScene={ (route, navigator) => {
            const Component = route.component;
            return (
              <View style={{flex: 1, marginTop:40}}>
                <Component navigator={navigator} route={route} {...route.passProps} />
              </View>
  ...

MainContainer is connected with Component within react-redux connect function to pass Props and Actions to props.

Is it better access to context or to props?

vs

const store = createStoreWithMiddleware(reducer, initialState); //<-- here
export default class App extends Component {
render () {
  return (
    <Navigator style={{flex: 1}}
      initialRoute={{ component: MainComponent }}

      renderScene={ (route, navigator) => {
      const Component = route.component;
      return (
        <View style={{flex: 1, marginTop:40}}>
          <Component 
             navigator={navigator} 
             route={route} 
             {...route.passProps} 
             store={store}                      //<-- here
               />
       </View>
    ...

2. In a component Scene, (not wrapping as a smart container) how to setup a listener about changes in redux state or have i to bind component state to redux state.

Passing state (of Redux store) and actions as passProps when pushing newScene in Navigator, and in then newScene dispatch actions and executed correctly, the state is update, but... does not re-render the scene.

Do I have to bind state component to Redux state to see the changes reflected on screen?

Is there any sample about best practices in this scenario?

3. props vs connect in the same Scene

In the same Scene, from Top to Down components, which is the best approach to pass redux state (not talking about component state) as wrapping a component in a 'smart' container with 'connect' from react-redux, or passing the hole scenario as props.

Answer 1

1. The first solution should be used, as the provider should be the outermost component (so that everything underneath may connect properly).
2. You could either run a callback on componentDidReceiveProps or (what I would prefer) simply connect the component, which needs access to a store. This is exactly what redux is for. The only reason not to do this is if you would like to reuse a component with another stores content (truly representational component)
3. This strongly depends on the application and the depth of the components but in general, this is completely okay. You may also pass the information as props, but as your application grows bigger you may have to pass a lot of props, which may obfuscate the real intend of you components