React-Intl injectIntl not working with mergeProps

Question

I have the following code which works fine

module.exports = injectIntl(redux.connect(mapStateToProps, mapDispatchToProps)(props => {
    document.title = props.intl.formatMessage({ id: "app-name" });

    return (<App {...props} />);
}));

When I add mergeProps to redux.connect, 'intl' no longer exists in my props and I get an error when trying to set document.title

The broken code:

module.exports = injectIntl(redux.connect(mapStateToProps, mapDispatchToProps, mergeProps)(props => {
    document.title = props.intl.formatMessage({ id: "app-name" });

    return (<App {...props} />);
}));

My mergeProps function:

function mergeProps(stateProps, dispatchProps) {
    const mergeProps = {
        error() {
            alert("throw error");
        },
    };
    return Object.assign({}, stateProps, dispatchProps, mergeProps);
}

When replacing mergeProps with null in the redux.connect function, there are no errors and the code runs fine.

Any idea why merge props seems to be breaking the react-intl injection?

score 0 · Accepted Answer · answered Aug 10 '18 at 17:39

Solved this by passing ownProps into merge props. This is exactly what ownProps aims to solve and I was not familiar.

Solution looks like this:

function mergeProps(stateProps, dispatchProps, ownProps) {
    const mergeProps = {
        error() {
            alert("throw error");
        },
    };
    return Object.assign({}, stateProps, dispatchProps, ownProps, mergeProps);
}

React-Intl injectIntl not working with mergeProps

1 Answers1