redux: MapStateToProps not being called even after changing STATE in reducer.

I just recently rewrote connect myself and had to learn it’s not as simple as one thinks. There’s a lot of edge cases and performance considerations that you will ultimately run into that are already handled for you with connect. Unless you have a compelling case against using connect, reinventing the wheel now is just shooting yourself in the foot.

Does the render function use this.state or this.props for data binding?

My understanding is that mapStateToProps() should replace the need for getInitialState(), and encourage use of this.props.

@jimbolla

This means, when store state changes, the children get notified first and rerender themselves. Then the parent component gets notified. This can lead to extra renders of the children where they have stale props because their parent hasn’t been updated yet

Great, thanks for your clarification. I think what confused me is that when children get notified first, they don’t always rerender themselves first — in my experiments, the child didn’t render until after the parent even though the child received state updates first.

I believe this is related to the fact that React defers setState updates under certain conditions, and doesn’t defer under other conditions: http://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm

In other words, in v4, sometimes this problem manifests itself, and sometimes it doesn’t, probably depending on what triggered the initial dispatch that causes the store to update. Thanks for fixing this in v5.

If you’re interested in the lifecycle, you can explore the relevant source code

@naw Because subscribing is done in componentWillMount, and that method fires from bottom-up, currently in react-redux 4.x (and fixed in the 5.0 beta) children subscribe to the redux store before their parents. This means, when store state changes, the children get notified first and rerender themselves. Then the parent component gets notified. This can lead to extra renders of the children where they have stale props because their parent hasn’t been updated yet. The fix was to make children subscribe to their parents, and only toplevel connected components subscribe directly to the store. This ensures subscriptions always fire top to bottom.

Every component that connected to the store like this would setState on every store state change, which would destroy performance. It would also run into issues with child components rerendering before parents, which means its state may be out of sync with its props.

As far as I can tell, the original example is broken because the reducer is trying to A) use a promise, and B) do a return inside that promise. Thus, returning undefined.

Also, conceptually what render() does isn’t “binding”, so it’s probably best to avoid that terminology.

@cubiccompass : Those are separate things.

getInitialState is the method used to initialize local component state with the React.createClass() component definition syntax. mapStateToProps is the method that React-Redux’s connect function uses to extract pieces of data from the store and pass them to a component as props. Those are not mutually exclusive.

You can have a component that renders data using props retrieved from the Redux store, props passed down by a parent component, and local component state, all at once. How you write your own render functions is up to you. Example:

const MyComponent = React.createClass({
    getInitialState : function() {
        return {
            valueFromLocalComponentState : 42
        };
    }

    render : function() {
        const {propFromReduxState, propFromParent} = this.props;
        const {valueFromLocalComponentState) = this.state;

        return (
            <div>
                <div>Redux prop: {propFromReduxState}</div>
                <div>Parent prop: {propFromParent}</div>
                <div>State value : {valueFromLocalComponentState}</div>
            </div>        
        );
    }
});

const mapState = (state) => {
    return {
        propFromReduxState : state.someValue
    };
}

export default connect(mapState)(MyComponent);

// and in some parent component in another file
<MyComponent propFromParent={123} />