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


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) => {
    const currentPage = this.navigator.pages.slice(-1)[0]
    if(currentPage.key !={
                component: page,
                props: { key: }

The problem is that when I wrap a component with react-redux's connect function, 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(')', '')

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. doesn’t help either. I need help with coming up with unique names for my wrapped components.