深刻理解Provider

在Redux中最核心的天然是组件，以及组件相关的事件与数据流方式。可是咱们在Redux中并无采用传统的方式在getInitialState()中去初始化数据，而是采用Provider统一处理，省去了开发者很多工做，可是Redux到底如何将state中的数据传递给各组件的呢？还得看看Provider的源码实现（微信：react-javascript）。

1.经常使用数据传递写法

在ReactJS中的数据传递通常采用state和props，而props做为父组件向子组件的主要方式。如：

const TodoList = ({ todos, onTodoClick }) => (

  <ul>

    {todos.map(todo =>

      <Todo

        key={todo.id}

        {...todo}

        onClick={() => onTodoClick(todo.id)}

      />

    )}

  </ul>

)

以上代码能够看出key, todo数据对象,包括onClick函数都是采用props的方式传递给Todo子组件的。

可是做为统一的数据传递方式Provide，是怎样作的呢。

2.Provider的实现方式。

在咱们在调用Provider时，采用的是如下的方式：

const store = createStore(reducer)

render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

)；

a.首先咱们看到的是先建立store对象；

b.而后将store传递给Provider；

c.而后将应用组件作为Provider的子组件。

不过问题又来了：咱们并无看到Provider将store做为props传递给子组件啊。

3.Provider源码实现

打开Provider源码，咱们看到Provider的源码实现并很少，除去一些安全性检查的代码外，仅仅剩下面的代码。

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是经过getChildContext的的方式传递给子组件的，而且咱们也在connect中看到子组件取数据的过程：constructor(props, context) {

        super(props, context)

        this.version = version

        this.store = props.store || context.store

.......

}

在没有定义props的状况下，经过context直接取得store中的数据，或者说取得context中的数据。而常见的场景通常以下：

<Provider store={store}>

    <App />

  </Provider>