Props lost if mapStateToProps & mapDispatchToProps reference same high level prop

[bcardi]

I was hoping to group my redux state and dispatch props under a single property in my component, but my state props are lost when redux completes its merge.

const mapStateToProps = (state,ownProps) => {
    return {
        redux: {
            state: {
                login: loginStateSelector(state)
            }
        }
    };
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        redux: {
            actions: {
                loginUser: (creds) => {
                    dispatch(UserActions.loginUser(creds))
                },
                showModal: (modalName) => {
                    dispatch(UserActions.showModal(modalName))
                }
            }
        }
    };
};

I expected to see this

props: {
    redux: {
        state: {
            login: loginStateSelector(state)
        },
        actions: {
            loginUser: (creds) => {
                dispatch(UserActions.loginUser(creds))
            },
            showModal: (modalName) => {
                dispatch(UserActions.showModal(modalName))
            }
        }
    }
}

But, after redux combines the props, i see this

props: {
    redux: {
        actions: {
            loginUser: (creds) => {
                dispatch(UserActions.loginUser(creds))
            },
            showModal: (modalName) => {
                dispatch(UserActions.showModal(modalName))
            }
        }
    }
}

Is this a bug or working as designed? it seems that redux should be able to combine the two without loss of data.

[gaearon]

React Redux can’t guess how to merge two completely different objects. It isn’t obvious: for example, if both were Immutable maps, “merging” them naïvely would break them completely.

We let you specify a third argument called mergeProps to compare the merging behavior. By default it uses Object.assign()-like behavior which is why props are overridden. But you can specify a different behavior:

const mapStateToProps = (state,ownProps) => {
    return {
        login: loginStateSelector(state)
    };
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        loginUser: (creds) => {
            dispatch(UserActions.loginUser(creds))
        },
        showModal: (modalName) => {
            dispatch(UserActions.showModal(modalName))
        }
    };
};

const mergeProps = (stateProps, dispatchProps, ownProps) => {
    return {
        ...ownProps,
        redux: { 
            state: stateProps, 
            actions: dispatchProps
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps
);

I am using object spread operator in this example but you can write it with Object.assign() instead (don’t forget to add a polyfill for it in this case):

const mergeProps = (stateProps, dispatchProps, ownProps) => {
    return Object.assign({}, ownProps, {
        redux: {
            state: stateProps,
            actions: dispatchProps
        }
    });
};

I hope this helps!

Note that grouping objects like this will cause unnecessary allocations and will also make performance optimizations harder because we can no longer rely on shallow equality of result props as a way to tell whether they changed. So you will see more renders than with a simple approach without namespacing which we recommend in the docs.