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
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 './....'
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);
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]';
Related
I usually export the components by this way:
export {Login} ;
Then import them in index.js file by this way:
export * from './login';
Then import them in each screen i want by this way :
import {Login, Header, Footer} from './index.js'
Now i am using redux in my project and i should use connect when i export my components by this way:
export default connect(mapStateToProps, {emailChanged})({Login});
But i am getting following error
How should i export Logincomponent ? ( Please keep in your mind i need to use index.js file to export my components, then i can not export them separately)
If u want specific name for the Component. you can create const and pass it in export.
const LoginComponent = connect(mapStateToProps, {emailChanged})({Login});
export { LoginComponent };
Working on react application in TypeScript.
I'm trying to understand the correct syntax for exporting a default component using as
Up till now I've used:
class HomePage extends Component<IProps, IState> {
...
}
export default HomePage
or in shortly:
export default class HomePage extends Component<IProps, IState> {
...
}
now, after adding redux support. I have something like:
class HomePage extends Component<IProps, IState> {
...
}
const mapStateToProps = (state: StoreState) => {
...
};
const mapDispatchToProps = {
...
};
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
but I can't figure it out how to add as to the connect default export
e.g something like:
// This is NOT working. I get Syntax error.
export default connect(mapStateToProps, mapDispatchToProps)(HomePage) as HomePage;
is it possible? or should I do it? it's seems that anyway the export name is HomePage (when I'm importing HomePage in other file, the IDE is automatically detects and import this file). Where is it taken from? the name of the file (HomePage.tsx)?
This is do work for me:
const connectedHomePage = connect(mapStateToProps, mapDispatchToProps)(HomePage)
export {connectedHomePage as HomePage};
but it's two lines (I prefer in one line) and it's not a default export.
so, is there a way to export default AND adding as to the statement? just so it will be clear what is the exported name?
as has 2 meanings. In ES6 modules, it can be a way to rename an import or export. In TypeScript, it is a typecast operator. I am going to assume you mean the first, specifically a way to rename an export.
Now take a look at this expression you suggested:
export default connect(mapStateToProps, mapDispatchToProps)(HomePage) as HomePage;
Do you want to export it as default or do you want to export it as HomePage? When you export default, default is the export name. Given that, does this make sense to expect it to be called HomePage? You either export something that is called default or something that is called HomePage.
This table associates different export statement forms with the expected export name and local names:
For importing, though...
If you are importing a default export, you have to explicitly name the import. Default exports will not automatically have a local name after importing. Example: import express from "express". The local name does not matter. Could as well be import banana from "express".
If you are importing a named export, by default, the local name will be the same as the exported name. Example: If you have export const x = 2, then, you should import it as import { x } from "module". You can also rename the import like this: `import { x as y } from "module".
The above tables are from the ES6 specs: http://www.ecma-international.org/ecma-262/6.0/
The component which is external includes and external file
class NavigationBarContainer extends React.PureComponent {
render = () => <NavigationBar extraBanner={<Banner
/>} {...this.props} />
}
in my App
import NavigationBar from '../components/NavigationBar'
<NavigationBar
extraBanner />
doesn't seem to work
import NavigationBarContainer from '../components/NavigationBar'
<NavigationBarContainer {...this.props}>
doesnt seem to work either getting error below
**Invalid prop extraBanner of type boolean supplied to NavigationBar, expected a single ReactElement.**
Two possible things that are wrong here.
1) NavigationBarContainer is not being exported, thus you cannot import it.
You can fix this by making sure to export the class one of two ways -- either change the class declaration to include the export keyword
export default class NavigationBarContainer extends React.PureComponent
or add a line to the bottom of that file
export default NavigationBarContainer;
2) You are trying to import a component called NavigationBarContainer from a file called NavigationBar. If that file is called NavigationBarContainer then this will not work. Make sure that your file names are correct.
A quick summary of export vs export default and importing
export default
The default export can be given any name when imported, eg.
// components/MyComponent.js
export default class MyComponent extends React.Component {...}
// AnotherFile.js
import MyComponent from 'components/MyComponent'; // works
import WhateverName from 'components/MyComponent'; // also works
export
When you don't use the default keyword, then you're making a named export. These have to be imported directly by name, using this syntax:
// components/SmallComponents.js
export class SmallComponent1 extends React.Component {...}
export class SmallComponent2 extends React.Component {...}
// AnotherFile.js
import {SmallComponent1, SmallComponent2} from 'components/SmallComponents'; // works
import SmallComponent1 from 'components/SmallComponents' // does not work
import {WhateverName} from 'components/SmallComponents' // does not work
Hope this helps!
export default class SampleClass extends Component {
}
while importing this class which of the following is correct?
import sampleClass(same as class name) from '.module1'; or
import Myclass(Some custome name) from '.module1';
Your component:-
app.js
export default class App extends Component{
//
}
While importing components You should always import as it is:-
import App from "./components/app";
Since you have added redux as a tag so I might guess you arisen this question while working with reducers, if i am not wrong(really sorry if i am wrong).In case of reducers they always return some object (state) a reducer always look like this
reducer-post.js
export default function(){
//return []
}
So while importing reducers you can use any name just like this
import AnyReducer from "./reducers/reducer-post"
Since reducers are functions here so by default they are imported from it, but in the case of components, they were the class so we need to explicitly import them by name.
Using the same name is unnecessary for default exports, but becomes necessary in case of named exports.
So it's better to always use the name defined in export.
In reference this coding pattern:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Thing from '../components/Thing';
class ThingContainer extends Component {
render() {
return <Thing {...this.props} />;
}
}
function mapStateToProps(state) {
...
}
export default connect(mapStateToProps)(ThingContainer);
So it 1) imports a component(Thing), 2) creates another component (ThingContainer which is technically not a container) class to render that first component, and lastly using connect to finally export the container.
What's the difference with skipping step 2 above, and simply using the imported component(Thing) directly to export the container?
Yeah, that file looks like it's somewhat unnecessary. The class ThingContainer component does nothing but forward props to <Thing>, which is exactly what the wrapper components generated by connect do already. So, that's useless - the file should just do export default connect(mapState)(Thing), and it would work exactly the same without the extra ThingContainer definition.