connect doesn't refresh when state change on react-native with redux

Question

It's been 5 hours that I'm on the problem but decidedly it does not want to work...

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

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

Thank you for your answers

//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) => {
    return {
        scrollData: state.scrollData
    }
}

export default connect(mapStatetoProps)(TopNavigation)

// 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 (
            <View style={styles.mainContainer}>
                <FlatList
                    data={recetteData}
                    keyExtractor={(item) => item.id.toString()}
                    onPress={() => this._toggleSet()}
                    renderItem={({ item }) => <ItemBox item={item} />}
                    onScroll={(event) => this.props.dispatch({ type: "POSITION", value: event.nativeEvent.contentOffset.y })}
                    style={styles.flatListContainer} />
                <TopNavigation />
            </View>
        )
    }
}

export default connect(mapStateToProps)(Home)

//ScrollData Reducer

const initialState = {
    scrollData: {
        scrolled: false
    }
}

function scrollData(state = initialState, action) {
    let nextState
    switch (action.type) {
        case 'POSITION':
            if (action.value > 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

//ConfigureStore

import { createStore } from 'redux';
import buttonPreference from './Reducers/buttonPreference'
import scrollData from './Reducers/scrollData'


export default createStore(/*buttonPreference,*/scrollData)

On console (console.log of componentDidMount of TopNavigation):

Object { "scrolled": false, }

But no change when i'm scrolling

Here is my package.json

{
  "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
}

Update

Putting on TopNavigation:

//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 });
        }
    }

But it still doesn't work, no event or state change...

Update 2

The store seems to be work oroperly, the problem more precisely is that it does not update in real time the component.

If I populate the store, I quite and return to the page using navigation, the data is well changed.

The real question is, why the component does not update in real time with the new store data passed by the reducer...

Update 3

Expo in production mode solved problem...

Answer 1

You have done everything right for the most part. The problem is with your TopNavigation file. Two important things to keep in mind here:

1. componentDidMount() is called only once, when your component is rendered for the first time. So even if your connect works correctly, you will not get more than one call to this function. To check if your props are updated correctly, you can have a console.log() inside componentDidUpdate() as follows:

    componentDidUpdate(prevProps) {
        if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
            console.log(this.props.scrollData);
        }
    }
   

2. Also keep in mind that this will not cause a re-render of your component. A component re-renders only when the state of the component changes. You can use this change in your props to trigger a state change, which will call the render function again, to trigger a re-render of your component, as follows:

   state = {scrolledState: false};
   
   ...
   ...
   
   componentDidUpdate(prevProps) {
       if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
           // console.log(this.props.scrollData);
           this.setState({scrolledState: this.props.scrollData});
       }
   }
   

Hope this helps!

Answer 2

That sounds like a bug with environnement. I launched Expo in production mode and it solved problem.

On folder .expo

//setting.json

{
  "hostType": "lan",
  "lanType": "ip",
  "dev": false, // false for production env
  "minify": false,
  "urlRandomness": "53-g5j"
}

I hope it can help but it would be desirable to be able to continue working on dev mode...

I report a bug on expo github

Answer 3

The previous answer was right. But to make the code works try the below approach.

class Home extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      scrolling: false;
    }
}

makeScroll = (event) => {
  this.props.dispatch({ type: "POSITION", value: event.nativeEvent.contentOffset.y 
  });
  setTimeout(() => this.setState({scrolling: true}), 150);
}

render() {
    return (
        <View style={styles.mainContainer}>
            <FlatList
                data={recetteData}
                keyExtractor={(item) => item.id.toString()}
                onPress={() => this._toggleSet()}
                renderItem={({ item }) => <ItemBox item={item} />}
                onScroll={(event) => this.makeScroll(event)}
                style={styles.flatListContainer} />
            <TopNavigation />
        </View>
    )
 }
}

export default connect(mapStateToProps)(Home)

Instead of directly dispatch at onScroll event. Pass it into a function and do change the local state inside that after dispatch.