【React全家桶入门之十四】在React中使用Redux

在前面两篇文章中，我们通过一个简单的计数器例子介绍了Redux的基本概念和用法。

在计数器这个例子中，当store的数据更新时，UI就会相应地被更新，这是由于我们使用了store.subscribe方法在触发了action的时候执行了setCount方法来更新UI。

在React的思想中，视图的变化对应的是数据的变化，data -> ui，这里的data可以是组件的新state，或者接收到的新props和context。由于Redux的数据与React组件状态互相独立，这里就需要一个桥梁来连接React与Redux，也就是react-redux。

react-redux这个库提供的api有：Provider、connect、connectAdvanced。

Provider

Provider是一个React组件，这个组件实现很简单，一共55行代码，它只是接收store、children这两个属性，并且定义了包含store和storeSubscription字段的childContext：

// https://github.com/reactjs/react-redux/blob/master/src/components/Provider.js
export default class Provider extends Component {
  getChildContext() {
    return { store: this.store, storeSubscription: null }
  }

  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,
  storeSubscription: subscriptionShape
}

Provider的render方法简单的返回了props.children。Provider的主要作用是提供在组件树的某一个节点通过context获取store的能力。

一般在项目中，会将Provider这个组件放在整个应用的最顶层，然后将使用Redux.createStore方法创建的store对象传给Provider：

const store = createStore(rootReducer);

ReactDOM.render(<Provider store={store}>