React Redux component not re-rendering on state change

Question

How do you make sure that you trigger the state change and catch it in the component?

My application, has a action, which is triggered on a click in a filter component. This filter does a search and returns the new products (based on filter).

The action works and using the React Chrome extension, I can see the global state of the products changing. However I can't get the new state in my shopComponent, which will change the displayed products based on the new product state.. :(

class shopProduct extends Component {

    constructor(props) {
        super(props);
        this.state = {...localStateItems }
    }

    render() {
        if(this.props.products != undefined) {
          console.log('not undefined: ', this.props.products);
          // NOTHING IS SHOWING
        }
        console.log('shopProducts Render: ', this.props);
        // NOTHING IS SHOWING

        return (
            ...Some new products
        )
    }
}

const mapStateToProps = (state, ownProps) => ({
    cart: state.cart,
    products: state.products
});

shopProduct.propTypes = {
    productSearch: PropTypes.func.isRequired,
    products: PropTypes.object
};

export default connect(mapStateToProps, { productSearch, products })(shopProduct);

Am I mapping this to the shopProduct component correctly?

score 1 · Answer 1 · answered May 28 '18 at 00:49

1

I think you misunderstand what the second parameter passed to connect should be. According to the docs it should mapDispatchToProps. You are trying to pass in your propTypes, which is not what that second param is expecting. You may want to read about what mapDispatchToProps is for.

answered May 28 '18 at 00:49

jmargolisvt

5,722
4
29
46

Sorry, I'm confused. Can you give me an example of how it should be defined? – waz May 28 '18 at 00:53
Am I supposed to be putting the `mapDispatchToProps` in the shopProducts file or the Filter file (where the action is triggered)? – waz May 28 '18 at 00:57
So how to I view the new state inside the component? – waz May 28 '18 at 01:39

score 0 · Accepted Answer · answered May 28 '18 at 06:15

OK. So the reason why it wasn't rendering is that we were using immutable JS.
So for anyone else with the problem. Check if your app is using that.

Just reference the object with state.get('objectName')

RIGHT:

const mapStateToProps = (state) => ({
   products: state.get('products')
});

-

WRONG:

const mapStateToProps = (state, ownProps) => ({
    cart: state.cart,
    products: state.products
});

React Redux component not re-rendering on state change

2 Answers2