mapStateToProps doesn't update when store changes

Question

I used connect from "react-redux" to link a mapStateToProps function to a component.

The props are correctly linked when the component is mounted but they don't update when store changes.

Besides that a store.subscribe() in the component correctly triggers when store changes, so action and dispatcher seems to be working.

The dispatch is made from the componentTest.

I created a minimal project to reproduce the issue.

App.js:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';

import {store} from "./store";
import TestComponent from "./TestComponent";
import {Provider} from "react-redux";

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Provider store={store}>
                    <TestComponent/>
                </Provider>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

TestComponent.js

import React, {Component} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {testDispatcher} from "./store";
import {connect} from "react-redux";
import {store} from './store'


class TestComponent extends Component {

    constructor(props) {
        super(props)
        this.state = {
            message: store.getState().message
        }
    }

    componentWillReceiveProps(nextProps){
        console.log("updating")
        console.log(nextProps)
    }

    componentDidMount() {
        store.subscribe(() => {
            this.setState({
                message: store.getState().message
            })
        })
    }

    render() {
        console.log(this.props)
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={() => {
                        console.log("onpress")
                        store.dispatch(testDispatcher("updated value"))
                    }}
                ><Text>Test</Text></TouchableOpacity>
                <Text>data by subscribe : {this.state.message}</Text>
                <Text>data by props : {this.props.message}</Text>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});


const mapStateToProps = state => {
    return {
        message: state.message
    }
}


export default connect(mapStateToProps)(TestComponent)

store.js

import {createStore} from "redux";

const TEST = "TEST"


const storeData =  {
    message: "default value"
}


export function testDispatcher(message){
    console.log("in dispatcher")
    return {
        type : TEST,
        message
    }
}


export const reducer = (state = storeData, action) => {
    switch (action.type) {
        case TEST:
            state.message = action.message
            console.log("new state", state)
            return state
        default:
            return state
    }
}

export const store = createStore(reducer)

I'm probably missing something obvious. Any help would be appreciated.

dentemm dentemm · Accepted Answer · 2019-03-01T08:20:55

The mistake is inside your reducer, where you are trying to alter the state (which is immutable).

export const reducer = (state = storeData, action) => {
  switch (action.type) {
     case TEST:
        return {
          ...state, // not needed here, but I add this since your production state will likely have more than just one key
          message: action.message
        };

      default:
        return state
   }
}

mapStateToProps doesn't update when store changes

1 Answers