React-Redux入门学习（三）

前两篇学习了Redux的基本用法和异步操作，今天学习Redux最后一部分。介绍如何在React项目中使用Redux。
为了方便使用，React-Redux的作者封装了一个React专用的库React-Redux。本文主要介绍它。
这个库是可以选的，实际项目中你可以选择，是直接用Redux，还是使用React-redux。后者虽然提供了遍历，但是需要掌握额外的API，并且要遵守它的组件拆分规范。

---

一、UI组件

---

React-Redux将所有组件分成两大类：UI组件（presentational component）和容器组件（container component）。
UI组件有以下几个特征：

只负责UI的呈现，不带有任何业务逻辑
没有状态(即不使用 `this.state`这个变量)
所有数据都有参数（this.props）提供
不使用任何Redux的API

下面就是一个UI组件的例子

<div>
    {this.props.title}
</div>

因为不含状态，UI组件又称‘纯组件’。即它像纯函数一样，纯粹由函数决定它的值。

二、容器组件

---

容器组件的状态恰恰相反。

负责数据管理和业务逻辑，不负责UI的呈现
带有内部状态
使用Redux的API

总之，只要记住一句话就可以了，UI组件负责视图的呈现。容器组件负责管理数据和逻辑。
如果一个组件既有UI，又有逻辑该如何处理？
回答是，将它拆分下面的结构：
外面是一个 容器组件，里面包了一个UI组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。
React-Redux规定，所有的UI组件都由用户提供，容器组件则由React-Redux自动生成。也就是说，用户负责视觉层，状态管理全部交给它。
三、connect

---

React-Redux提供了connect方法，用于从UI组件中生成容器组件。connect的意思就是将两种组件连接起来。

import { connect } from 'react-redux';