翻译|How to Export a Connected Component

原文在这里:How to Export a Connected Component

根据你在export的不一样,能够得到一个完美的函数式React-Redux connected组件,或者是一个彻底忽略Redux的组件

换句话说这里两个彻底不一样的世界:

class Thing extends Component { ... }

export default connect(mapStateToProps)(Thing);
复制代码

还有这个:

export class Thing extends Component { ... }

connect(mapStateToProps, mapDispatchToProps)(Thing);
复制代码

若是设定为第二个实例,能够注意到全部的React有关的东西,可是Redux的函数,mapStateToProps和mapDispatchToProps没有返回

connect不会对组件做出改变

在你用connect包装一个组件的时候, 例如connect(...)(Thing),重要的一点要理解,虽然返回的是一个connected的组件,可是它根本没有动过原始的Thing组件任何东西.

换句话说,运行connect(...)(Thing),没有"connect"到Thing组件,缺失没有. 所作的是翻译一个通过链接的新组件.

导出Connected组件

因此,在导出组件的时候,必定要定义到底链接的是哪个组件.确保export关键字出如今 connect调用的前面,像这样:

export default connect(...)(Thing);
复制代码

为何不一样时导出原始组件和通过链接的组件?

同时导出链接组件和未链接组件很是有效.对于测试大有好处-例如想测试没有没有链接到模拟Redux store的组件.

下面是同时导出未链接组件和链接组件的代码:

export class Thing extends React.Component {
  render() {
    return "whatever";
  }
}

const mapState = state => ({ someValue });
const mapDispatch = { action1, action2 };

export default connect(mapState, mapDispatch)(Thing);
复制代码

注意这里有两个导入,其中之一是名字,另外一个是default,这里的定义很重要,由于会影响到后面的导入(import).

Import 链接组件

总的原则是,若是某个代码是用exprot default,在导入的时候不用{},;例如:

// Thing.js
export default connect(...)(Thing);

// UserOfThing.js
import Thing from './Thing';
复制代码

若是导出的是名字,须要使用{}:

// Thing.js
export function Thing() { ... }

// UserOfThing.js
import { Thing } from './Thing';
复制代码