title: connect doesn't refresh when state change on react-native with redux
body: <p>It's been 5 hours that I'm on the problem but decidedly it does not want to work...</p>
  
  <p>I would like to dispatch the event when onScroll is detected on my home component and receive the status "true" or "false" in my TopNavigation component</p>
  
  <p>For now my reducer works well (with a console.log(nextState) before the render) but I have the impression that the connection does not work with connect(mapStatetoProps)(TopNavigation) because my component does not re-render</p>
  
  <p>Thank you for your answers</p>
  
  <pre class="lang-js prettyprint-override"><code>//TopNavigation
  
  import React from 'react'
  import { connect } from 'react-redux'
  
  
  class TopNavigation extends React.Component {
      constructor(props) {
          super(props)
      }
  
  
      componentDidMount() {
          console.log(this.props.scrollData)
      }
  }
  
  // Render things...
  
  const mapStatetoProps = (state) =&gt; {
      return {
          scrollData: state.scrollData
      }
  }
  
  export default connect(mapStatetoProps)(TopNavigation)
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// Home
  
  import React from 'react'
  import { StyleSheet, View, FlatList } from 'react-native'
  import gStyles from '../../../Styles/global'
  import { connect } from 'react-redux'
  
  // Partials
  import ItemBox from '../../Partials/ItemBox'
  import TopNavigation from '../../Partials/TopNavigation'
  
  // Data
  import recetteData from '../../../api/recetteData'
  
  
  class Home extends React.Component {
      constructor(props) {
          super(props)
      }
  
      render() {
          return (
              &lt;View style={styles.mainContainer}&gt;
                  &lt;FlatList
                      data={recetteData}
                      keyExtractor={(item) =&gt; item.id.toString()}
                      onPress={() =&gt; this._toggleSet()}
                      renderItem={({ item }) =&gt; &lt;ItemBox item={item} /&gt;}
                      onScroll={(event) =&gt; this.props.dispatch({ type: "POSITION", value: event.nativeEvent.contentOffset.y })}
                      style={styles.flatListContainer} /&gt;
                  &lt;TopNavigation /&gt;
              &lt;/View&gt;
          )
      }
  }
  
  export default connect(mapStateToProps)(Home)
  
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>//ScrollData Reducer
  
  const initialState = {
      scrollData: {
          scrolled: false
      }
  }
  
  function scrollData(state = initialState, action) {
      let nextState
      switch (action.type) {
          case 'POSITION':
              if (action.value &gt; 0) {
                  nextState = {
                      ...state,
                      scrollData: {
                          ...state.scrollData,
                          scrolled: true,
                      },
                  }
              }
              else {
                  nextState = {
                      ...state,
                      scrollData: {
                          ...state.scrollData,
                          scrolled: false
                      },
                  }
              }
              return nextState.scrollData.scrolled
          default:
              return state
      }
  }
  
  export default scrollData
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>//ConfigureStore
  
  import { createStore } from 'redux';
  import buttonPreference from './Reducers/buttonPreference'
  import scrollData from './Reducers/scrollData'
  
  
  export default createStore(/*buttonPreference,*/scrollData)
  </code></pre>
  
  <p>On console (console.log of componentDidMount of TopNavigation):</p>
  
  <p>Object {
    "scrolled": false,
  }</p>
  
  <p>But no change when i'm scrolling</p>
  
  <p>Here is my package.json</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
      "start": "expo start",
      "android": "expo start --android",
      "ios": "expo start --ios",
      "eject": "expo eject"
    },
    "dependencies": {
      "expo": "^32.0.6",
      "react": "^16.8.3",
      "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
      "react-native-elevated-view": "0.0.6",
      "react-native-gesture-handler": "^1.1.0",
      "react-native-paper": "^2.12.0",
      "react-native-responsive-dimensions": "^2.0.1",
      "react-navigation": "^2.0.1",
      "react-navigation-material-bottom-tabs": "^0.4.0",
      "react-redux": "^6.0.1",
      "redux": "^4.0.1"
    },
    "devDependencies": {
      "babel-preset-expo": "^5.0.0",
      "react-test-renderer": "^16.6.0-alpha.8af6728",
      "schedule": "^0.4.0"
    },
    "private": true
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>Putting on TopNavigation:</p>
  
  <pre class="lang-js prettyprint-override"><code>//TopNavigation
  
      constructor(props) {
          super(props)
          this.state = {
              scrolledState: false
          }
      }
  
      componentDidUpdate(prevProps) { // Instead of componentDidMount
          if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
              console.log(this.props.scrollData);
              this.setState({ scrolledState: this.props.scrollData });
          }
      }
  </code></pre>
  
  <p>But it still doesn't work, no event or state change...</p>
  
  <p><strong>Update 2</strong></p>
  
  <p>The store seems to be work oroperly, the problem more precisely is that it does not update in real time the component.</p>
  
  <p>If I populate the store, I quite and return to the page using navigation, the data is well changed.</p>
  
  <p>The real question is, why the component does not update in real time with the new store data passed by the reducer...</p>
  
  <p><strong>Update 3</strong></p>
  
  <p>Expo in production mode solved problem...</p>