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

Question

I'm using onsen-ui to style a meteor app with React for the frontend. As I understand it, onsen-ui manages navigation by pushing pages to a stack, where each page has a unique identifier.

Here is how my pages are loaded in App.js

loadPage = (page) => {
    const currentPage = this.navigator.pages.slice(-1)[0]

    if(currentPage.key != page.name){
        this.navigator.pushPage(
            {
                component: page,
                props: { key: page.name }
            },
            {
                animation: 'fade',
                animationOptions: {duration: 0.3, timing: 'ease-in'}
            },
        );
    }
}

So far everything works fine. But I have now included redux in my project, so I have some components which are connected to the store by react-redux's connect() function.

The problem is that for every component that connect wraps, the name property becomes Connect, so onsen-ui is having to deal with multiple pages with the same name in its stack.

As an example, let's say I have a component defined below

const ComponentName = props => {
    return (
        <p>Test component</p>
    )
}

export default connect()(ComponentName)

ordinarily, ComponentName.name returns ComponentName but once its wrapped with connect, ComponentName.name returns Connect

Is it at all possible to modify the name value for the wrapped component?

Every suggestion is welcome.

Edit: Following Vlatko's lead, this is how I eventually solved the problem.

export const getPageKey = (page) => {
    // returns a page key
    let key;
    if (page.name === 'Connect') {
        key = page.displayName
        // key = page.WrappedComponent.name
        // react-redux connect returns a name Connect
        // .displayName returns a name of form Connect(ComponentName)
        return key.replace('(', '').replace(')', '')
    }
    else {
        key = page.name
        return key
    }
}

So for every component I just get the key with getPageKey(ComponentName)

Edit 2. This approach doesn't work in production.

In production mode, I get single letters for page.displayName and those letters are hardly unique, which means I'm back where I started.

I need to find another approach. I'll update whatever I find.

score 5 · Accepted Answer · edited Dec 09 '19 at 08:52

5

This is happening because you are exporting your component through a higher order function (Connect), which is basically a closure in JavaScript.

The name of the HOC that you are using is Connect, and this is returned.

However, it is possible to get the name of the component passed into the connect HOC.

ComponentName.name // Connect
ComponentName.displayName // Connect(ComponentName)
ComponentName.WrappedComponent.name // ComponentName

edited Dec 09 '19 at 08:52

Amaobi Victor

67
1
7

answered Mar 22 '19 at 00:23

Vlatko Vlahek

1,839
15
20

It would be best if you edit the original post and add your update there below the question, so it is more visible and readable. – Vlatko Vlahek Mar 22 '19 at 01:38
I just did that – chidimo Mar 22 '19 at 01:39
Great ! I hope it will help others with the similar problem. – Vlatko Vlahek Mar 22 '19 at 01:41

score 1 · Answer 2 · answered Mar 22 '19 at 09:09

1

I’m not familiar with onsen-ui, and it looks like Vlatko has you covered, but couldn’t you also give the new connected component a name? For example:

const ComponentName = props => {
    return (
        <p>Test component</p>
    )
}

const ConnectedComponentName = connect()(ComponentName)

export default ConnectedComponentName;

Then hopefully you would be able to access the unique ConnectedComponentName

answered Mar 22 '19 at 09:09

mstiggle

195
7

2

This won't work. Once your export it the name changes to `Connect` – chidimo Mar 22 '19 at 09:37

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

Edit: Following Vlatko's lead, this is how I eventually solved the problem.

Edit 2. This approach doesn't work in production.

2 Answers2