react-redux的学习实现第四课:将store的挂载从根节点Index上移除
前几节的学习都是将store与子组件们(Header Content ThemeSwitch)的耦合关系解开,但是我们的store现在还是和Index相关,只要Index和store仍然以context方式挂载,这就意味着Index组件在其它没有store的场景下是完全无法复用的,所以这一节我的学习内容就是将store拆到Provider这样的包裹组件上。 具体的组件关系,如下:
在react-redux.js中添加以下代码:
export class Provider extends Component {
static propTypes = {
store: PropTypes.object,
children: PropTypes.any
}
static childContextTypes = {
store: PropTypes.object
}
getChildContext () {
return {
store: this.props.store
}
}
render () {
return (
<div>{this.props.children}</div>
)
}
}
Provider的职责就是将包裹进Provider的子组件原封不动的渲染,但是将store挂载在Provider自己的props上。那么此时,Index中就不再需要添加store相关的内容了。
class Index extends Component {
// static childContextTypes = {
// store: PropTypes.object
// };
// getChildContext() {
// return { store };
// }
render() {
return (
<div>
<Header />
<Content />
</div>
);
}
}
ReactDOM.render(
<Provider store={store}>
<Index />
</Provider>,
document.getElementById('root'));
Index中就只需要渲染Header以及Content了,并且挂载到根节点上时直接把index包裹在Provider中,然后给Provider传入store即可。换句话说,以前Index所有的store相关的职责现在全部转移到了一个名为Provider的容器组件上。