How do I modify the default name of react-redux connect function?

help
1

I’m using reduxto manage the state of my Meteorapp. I have React for the frontend, with onsen-ui for styling and navigation.

Pages are loaded with this function defined in App.js

loadPage = (page) => {
    this.hide();
    const currentPage = this.navigator.pages.slice(-1)[0]
    if(currentPage.key != page.name){
        this.navigator.pushPage(
            {
                component: page,
                props: { key: page.name }
            },
        );
    }
}

The problem is that when I wrap a component with react-redux's connect function, page.name returns Connect in development mode and a random alphabet in production mode.

I tried to use the function below to generate unique keys for my page based on a suggestion I got on SO

export const getPageKey = (page) => {
    if (page.WrappedComponent) {
        return page.displayName.replace('(', '').replace(')', '')
    }
    return page.name
}

But page.displayName returns names of the form Connect(letter) where the is hardly unique, thus multiple pages end up having the same key. Example component names I get are Connect(d), Connect(c) etc.

page.WrappedComponent.name doesn’t help either. I need help with coming up with unique names for my wrapped components.