connect 的使用
【connect
方法返回的也是一個 React 組件,通常稱爲容器組件。因爲它是原始 UI 組件的容器,即在外面包了一層 State
。connect
方法傳入的第一個參數是 mapStateToProps
函數,該函數需要返回一個對象,用於建立 State
到 Props
的映射關係。】
簡而言之,connect
接收一個函數,返回一個函數。
第一個函數會注入全部的models
,你需要返回一個新的對象,挑選該組件所需要的models
。
export default connect(({ user, login, global = {}, loading }) => ({
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices
}))(BasicLayout);
// 簡化版
export default connect(
({ user, login, global = {}, loading }) => {
return {
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices
}
}
)(BasicLayout);
@connect的使用
其實只是connect
的裝飾器、語法糖罷了。
// 將 model 和 component 串聯起來
export default connect(({ user, login, global = {}, loading }) => ({
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices,
menuData: login.menuData, // by hzy
redirectData: login.redirectData, // by hzy
}))(BasicLayout);
// 改爲這樣(export 的不再是connect,而是class組件本身。),也是可以執行的,但要注意@connect必須放在export default class前面:
// 將 model 和 component 串聯起來
@connect(({ user, login, global = {}, loading }) => ({
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices,
menuData: login.menuData, // by hzy
redirectData: login.redirectData, // by hzy
}))
export default class BasicLayout extends React.PureComponent {
// ...
}