# React-Redux 的用法

## React-Redux 的用法

### UI组件

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

### 容器组件

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

### connect()

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

```
import { connect } from 'react-redux';
const VisibleTodoList = connect()(TodoList);
```

为了定义业务逻辑需要给出下面的信息：

* 输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数
* 输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。

因此， connect 方法的完整 API 如下：

```
import { connect } from 'react-redux';

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList);
```

connect 方法接受两个参数： mapStateToProps 和mapDispatchToProps 。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

### Provider 组件
