react-redux provider组件

provider组件概念图

react-redux provider组件概念图

provider组件的作用

• provider包裹在根组件外层，使所有的子组件都可以拿到state。示例：

import React from 'react';
import {render} from "react-dom";
import {createStore} from 'redux';
import {Provider} from "react-redux";
import App from "./containers/App";
import reducer from "./reducer/index";
const store = createStore(reducer);

render(
    <Provider store={store}>
       <App/>
    </Provider>, document.getElementById('app'));

• 它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过context获取store。

provider组件的原理

• 它的原理是React组件的context属性，请看源码。

export default class Provider extends Component {
  getChildContext() {
    return { store: this.store }
  }

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

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

Provider.propTypes = {
  store: storeShape.isRequired,
  children: PropTypes.element.isRequired
}

Provider.childContextTypes = {
  store: storeShape.isRequired
}

核心代码就这么多，显然，它是一个容器组件。
关键点在：getChildContext,保存了全局唯一的store,类似于全局变量，子组件后续可以通过this.context.store来访问。

通过context传递属性的方式可以大量减少通过props 逐层传递属性的方式,可以减少组件之间的直接依赖关系。

使用示例

最近在写项目，在我的项目中就使用了provider组件，想看更详细的用法，可以看https://github.com/second-Sale/second-sale代码。