動手實現 React-redux（五）：Provider

咱們要把 context 相關的代碼從全部業務組件中清除出去，如今的代碼裏面還有一個地方是被污染的。那就是 src/index.js 裏面的 Index：

...
class Index extends Component {
  static childContextTypes = {
    store: PropTypes.object
  }

  getChildContext () {
    return { store }
  }

  render () {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}
...

其實它要用 context 就是由於要把 store 存放到裏面，好讓子組件 connect 的時候可以取到 store。咱們能夠額外構建一個組件來作這種髒活，而後讓這個組件成爲組件樹的根節點，那麼它的子組件均可以獲取到 context 了。

咱們把這個組件叫 Provider，由於它提供（provide）了 store：

在 src/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 作的事情也很簡單，它就是一個容器組件，會把嵌套的內容原封不動做爲本身的子組件渲染出來。它還會把外界傳給它的 props.store 放到 context，這樣子組件 connect 的時候均可以獲取到。

能夠用它來重構咱們的 src/index.js：

..
// 頭部引入 Provider
import { Provider } from './react-redux'
...

// 刪除 Index 裏面全部關於 context 的代碼
class Index extends Component {
  render () {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}

// 把 Provider 做爲組件樹的根節點
ReactDOM.render(
  <Provider store={store}>
    <Index />
  </Provider>,
  document.getElementById('root')
)

這樣咱們就把全部關於 context 的代碼從組件裏面刪除了。

下一節：動手實現 React-redux（六）：React-redux 總結

上一節：動手實現 React-redux（四）：mapDispatchToProps