Provider

参数

  • store
  • children
  • context

使用方式

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

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

解析

返回值

return (
  <Context.Provider value={this.state}>
    {this.props.children}
  </Context.Provider>
)

参数

store

store会传入组件的state里面并传给Context.Provider

this.state = {
  store,
  subscription
}

children

children就是传给Context.Provider的children

context

context是可以自定义的context,如果不传即用内部创建的context

// 如果不传自定义的context就用默认的
const Context = this.props.context || ReactReduxContext

Subscription

Subscription对象的作用是监听store的变化并执行对应的listeners

// 初始化的功能
trySubscribe() {
  if (!this.unsubscribe) {
    this.unsubscribe = this.parentSub
      ? this.parentSub.addNestedSub(this.handleChangeWrapper)
      : this.store.subscribe(this.handleChangeWrapper) // 给store上面添加了一个观察者,当store改变会执行所有listeners

    this.listeners = createListenerCollection()
  }
}
最后更新时间: 5/27/2019, 7:18:58 AM