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