Named exports with redux?

问题

i have got used to using named exports as it makes life easier for refactoring. I have just started to implement redux but it seems i can't do a named export because the connect needs to map the component.

so for example

class Something extends Component { ... }

export default connect(mapStateToProps)(Something);

Would it be possible to use a named export like "Something", i can't place the export on the class as although react continues to work - the connect is not getting exported so there is no redux state

Any ideas ?

Thanks in advance

回答1:

Just assign it to a const and export that like so:

class Something extends Component { ... }

export const ConnectedSomething = connect(mapStateToProps)(Something);

Then you can import it like so:

import { ConnectedSomething } from './....'

回答2:

If I'm understanding correctly, then you could export your "redux connected" component via named export as follows:

/*
Declare component class, with class name differing from named export
*/
class SomethingComponent extends Component { ... };

/*
Export redux connected HOC to external modules, via named export "Something"
*/
export const Something = connect(mapStateToProps)(SomethingComponent);

回答3:

I suggest using [folder]/index.ts:

export { default as SomethingComponent } from './SomethingComponent.tsx';

[folder]/SomethingComponent.tsx:

class SomethingComponent {}

export default SomethingComponent;

AnyComponent.tsx:

import { SomethingComponent } from '[folder]';

来源：https://stackoverflow.com/questions/54449350/named-exports-with-redux