翻譯|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';
複製代碼