mini-react-redux系列之一：Provider

  react-redux是一个用来连接redux store 和 react组件的库，它的源码比较精简，mini-react-redux主要实现了简化版的Prover组件和connect高阶函数。

目录结构如下：

image.png

下面是入口文件index.js

import { connect } from './connect';
import Provider from './Provider';

export { connect, Provider };

Provider实现

/* Provider.js */

import React from 'react';
import PropTypes from 'prop-types';

export default class Provider extends React.Component {
  static childContextTypes = {
    store: PropTypes.object
  };
  getChildContext() {
    return { store: this.props.store };
  }
  render() {
    return this.props.children;
  }
}

//  Provider使用示例
//   <Provider store={store}>
//     <App />
//   </Provider>

这里实现的Provider非常简单，其作用就是将redux传入的store存入Context（上下文环境）。这样，Provider下面的所有子孙组件，只要宣称自己需要这个context，就可以通过this.context访问到这个共同的环境对象。这样便解决了store在组件之间的传递问题，只需要通过this.context.store便可获取。

相关文章

mini-redux系列之一：createStore
mini-redux系列之二：applyMiddleware
mini-redux系列之三：combineReducers
mini-redux系列之四：bindActionCreators
mini-react-redux系列之一：Provider
mini-react-redux系列之二：connect
redux-thunk以及自定义redux中间件