翻譯|How to Export a Connected Component

摘要： 原文在這裡:How to Export a Connected Component 根據你在export 的不同,可以獲得一個完美的函式式React-Redux connected元件,或者是一個完全忽略Redux的元件 換句話說這...

原文在這裡: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';
複製程式碼