react redux - Provider

什么是Provider

最简单的就是 提供store

一般我们这样写在代码里，在我们的组件之外用Provider包裹起来，作用就是为了让里面的组件能够获取到store的值

<Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={App}>
                <IndexRoute component={Home}/>
            </Route>
        </Router>
</Provider>

详解

export default class Provider extends Component {
  getChildContext() { // getChildContext: 将store传递给子孙component
    return { store: this.store }
  }

  constructor(props, context) {
    super(props, context)
    this.store = props.store
  }

  componentWillReceiveProps(nextProps) {
    const { store } = this
    const { store: nextStore } = nextProps

    if (store !== nextStore) {
      warnAboutReceivingStore()
    }
  }

  render() {
    let { children } = this.props
    return Children.only(children)
  }
}

• 使用react的context属性，可以将属性(props)直接给子孙component，无须通过props层层传递。
• getChildContext ： 将外部的store对象放入context对象中，使子孙组件上的connect可以直接访问到context对象中的store。
• constructor ：初始化获得了props中的store
• render ： 渲染了其子级元素, 使整个应用成为Provider的子组件