redux学习理解08

redux-study

Posted by EWL on December 16, 2018

react-redux的学习实现第四课:将store的挂载从根节点Index上移除

前几节的学习都是将store与子组件们(Header Content ThemeSwitch)的耦合关系解开,但是我们的store现在还是和Index相关,只要Index和store仍然以context方式挂载,这就意味着Index组件在其它没有store的场景下是完全无法复用的,所以这一节我的学习内容就是将store拆到Provider这样的包裹组件上。 具体的组件关系,如下: component.png

在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的容器组件上。