1.组件
react-redux把组件分为两类：UI组件和容器组件。
UI组件的特征：
- 只负责 UI 的呈现，不带有任何业务逻辑
- 没有状态（即不使用this.state这个变量）
- 所有数据都由参数（this.props）提供
- 不使用任何 Redux 的 API
下面展示一个UI组件：
import React,{Component} from 'react';
class Nav extends Component{
render(){
return <div>
<div>
<ul>
<li>首页</li>
<li>发布信息</li>
<li>个人中心</li>
</ul>
</div>
</div>
}
}
容器组件的特征：
- 负责管理数据和业务逻辑，不负责 UI 的呈现
- 带有内部状态
- 使用 Redux 的 API
因此，UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
2.connect方法
react-redux提供connect()方法，从于从UI组件生成容器组件。
我使用画图软件CampTools画了connect()方法的概念图。
connect()有四个参数：mapStateToProps、mapDispatchToProps、mergeProps和options，我们一般常用的是mapStateToProps、mapDispatchToProps这两个参数。
connect方法在项目中的用法：
import {connect} from "react-redux";
import Login from "../components/login";
export default connect(mapStateToProps,mapDispatchToProps)(Login);
上面的代码中，我引入了react-redux中的connect方法，Login是我引入的项目中的UI组件。connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。这样就创建了一个容器组件。
3.mapStateToProps()
这个函数允许我们将store中的数据作为props绑定到组件上。
const mapStateToProps = (state)=> {
console.log('state',state);
return {
isRight:state.login.judge,
}
};
上面代码中，mapStateToProps是一个函数，它接state作为参数，返回一个对象。这个对象有一个isRight属性，代表UI组件的同名参数。
mapStateToProps会监听 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。
mapStateToProps的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象。
使用ownProps作为参数后，如果容器组件的参数发生变化，也会引发 UI 组件重新渲染。
connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会监听Store，就是说 Store 的更新不会引起 UI 组件的更新。
4.mapDispatchToProps()
connect 的第二个参数是 mapDispatchToProps，它的功能是，用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。
如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux发出。
const mapDispatchToProps = (dispatch) => {
return {
onJudge:(data)=>{
dispatch({type:"LOGIN",data});
}
}
};
上面的代码中，mapDispatchToProps返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的同名参数怎样发出 Action。
如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。上面的代码写成函数就是如下示例：
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
onJudge: () => {
dispatch({
type: 'LOGIN',
data
});
}
};
}
想要更详细的了解，可看项目完整代码：https://github.com/second-Sale/second-sale
