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?

Answer 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 .

Answer 2

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