Why redux mapStateToProps doesn't update component props even if store is updated?

Question

Redux store is updating correctly but react components props are not. I checked redux global state with a remote dev tool and it's updating as expected.
But when i check component props with react-devtools it isn't updating.
If i call getUserPublis() in a higher order component (index e.g) then mapStateToProps maps these props correctly, but when i create a new item it's not mapped (but its correctly updated into the store).
It's like if mapStateToProps() is not being called when redux state update

class Profile extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        title: 'Perfil',
        headerRight: <HeaderButton navigation={navigation}/>,
    });

    componentDidMount(){
        getUserPublis(this.props.userData.ownPublis)
    }
    onPressCard = (publi) => {
        this.props.navigation.navigate('cardDescription', {
            data: publi,
            user: props.userName
        })
    }

    maybeRenderAddButton = () => {
        if (this.props.userData.isCommerce){
            return(
                <FloatingButton
                    icon="md-add"
                    color="white"
                    onPress={() => this.props.navigation.navigate('offerNew', {
                        title: "Crear anuncio"
                    })}
                />
            )
        } else {
            return console.log('no hay add button')
        }
    }

    render(){
        this.maybeRenderAddButton()
        if (this.props.publis.length === 0) {
            return(
                <Text> Loading </Text>
            )   
        }
        return (
            <ScrollView>
            {
                this.props.publis.map((publi, index) => {
                        return(
                            <CardGeneral
                                key={index}
                                onPressCard={() => onPressCard(publi)}
                                data={publi}
                                user={this.props.user.displayName}
                            />
                        )
                    }
                )
            }

            </ScrollView>


            );
    }

}

function mapStateToProps(state) {
    return {
        user: state.auth.user,
        userData: state.firestore.userData,
        publis: state.publis
    }
}

export default connect(mapStateToProps)(Profile)

Reducer:

const initialState = []

function publis(state = initialState, action) {
    switch (action.type) {
        case 'FIRESTORE_PUBLI_SNAPSHOT': {
            return [
                ...state,
                action.payload.data
            ]
        }
        default:
            return state
    }
}

export default publis

Try to add a simple console.log into mapStateToProps function to see whether it's called when state.publis changes. If it's not, something is wrong with redux implementation (maybe missing a Provided or reducer not included in rootStore). — Václav Zeman

Sebastian Segura Sebastian Segura · Accepted Answer · 2019-02-06T14:49:14

Ok, finally i have the answer, it's unbelievable because i expended almost 5 days with this bug and as you can see there is nothing visibly wrong in the code.
For this app my stack is: react-native, expo, react-navigation and redux.
The problem, is apparently with expo because when i use simulator to run the app in development mode, the issue is there (mapStateToProps is called just once when the component is mounted), but when i ran the app in android device everything goes fine, but just for the first time that i ran... The next time the app has the same issue in android device and ios simulator. So i tried to run the app in 'expo development mode', and magically everything goes fine.
This is a problem because developer mode is slow and i can't use developer tools, but is good to know what is the real problem. Now i'm gonna post this in expo forum.
PD: I already updated expo and clear expo cache.

Why redux mapStateToProps doesn't update component props even if store is updated?

4 Answers