一、组件分类
React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。
UI 组件：
- 只负责 UI 的呈现，不带有任何业务逻辑
- 没有状态（即不使用this.state这个变量）
- 所有数据都由参数（this.props）提供
- 不使用任何 Redux 的 API
容器组件：
- 负责管理数据和业务逻辑，不负责 UI 的呈现
- 带有内部状态，可以将状态通过props给子组件
- 使用 Redux 的 API
React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，我们只写UI组件，而顶层容器是通过调用一个方法来生成的，具体如何生成？请继续看。
二、connect()方法
React-Redux 提供了connect方法，用于将 UI 组件包装成容器组件。
但是正如我们刚才提到的，顶层容器是要有状态有业务逻辑的，因此在connect方法生成顶层容器时，我们就应该把所需要的状态和业务逻辑定义好并提供给connect。
因此，connect方法的完整 API 如下。
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
其中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
二、mapStateToProps()方法
mapStateToProps是一个函数。它的作用就是建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。也就是拿一部分有用的state，映射到当前容器组件的props中，以便于通过props直接引用。
mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。
作为函数，mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。请看下面的例子：
//取一部分state给当前的顶层容器用
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
};
//根据todos和visibilityFilter的值来计算状态，映射给当前container的props
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(t => t.complete);
case 'SHOW_ACTIVE':
return todos.filter(t => !t.complete);
default:
throw new Error('Unknown filter: ' + filter)
}
};
如上代码，可以通过this.props.todos直接获取到需要的状态值，且todos变化时，容器重新渲染。
三、mapDispatchToProps()方法
mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。Action可以是一个函数，也可以是一个对象。
当需要派发action时，只需要调用this.props下的方法就可以调用dispatch派发action了。
//将事件绑定到顶层容器props，调用props.事件时可以直接派发action到store，进行状态修改
const mapDispatchToProps = (
dispatch
) => {
return {
setFilter: (filter) => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: filter
});
},
addTodo: (content) => {
dispatch({
type: 'ADD_TODO',
content: content,
id:i++
});
},
toggleTodo: (id)=>{
dispatch({
type: 'TOGGLE_TODO',
id: id
});
}
};
};
我们知道，redux单向数据流需要有store，action，dispatch，reducer，目前为止store一直未出现，还请继续向下看。
四、<Provider> 组件
connect方法生成容器组件时，我们定义了一堆的逻辑和状态，而只有顶层容器能拿到store的时候才有意义，因此需要让容器组件拿到store的state对象。
React-Redux 提供Provider组件，可以让组件树中的任意一个容器组件拿到state。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from "./redux/reducers";
let store = createStore(reducers);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root')
);
五、实例：TodoList
经典的TodoList效果图如下：
先来看一下项目结构：
index.js中provider包裹组件，代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from "./redux/reducers";
let store = createStore(reducers);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root')
);
文件夹说明
src>containers>TodoList---顶层容器文件夹，
src>containers>TodoList>TodoList.js---顶层容器组件，
src>containers>TodoList>components---UI组件文件夹，其下是UI组件文件，
src>redux>reducers---用于构建store的reducer函数，
TodoList:
import React, { Component } from 'react';
import AddTodo from './components/AddTodo'
import VisibleTodoList from './components/VisibleTodoList'
import Filter from './components/Filter'
import {connect} from "react-redux";
let i=0;
class TodoList extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<AddTodo addTodo={this.props.addTodo} />
<VisibleTodoList todos={this.props.todos} toggleTodo={this.props.toggleTodo}/>
<Filter setFilter={this.props.setFilter}/>
</div>
);
}
}
//取一部分state给当前的顶层容器用
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
};
//根据todos和visibilityFilter的值来计算状态，映射给当前container的props
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(t => t.complete);
case 'SHOW_ACTIVE':
return todos.filter(t => !t.complete);
default:
throw new Error('Unknown filter: ' + filter)
}
};
//将事件绑定到顶层容器props，调用props.事件时可以直接派发action到store，进行状态修改
const mapDispatchToProps = (
dispatch
) => {
return {
setFilter: (filter) => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: filter
});
},
addTodo: (content) => {
dispatch({
type: 'ADD_TODO',
content: content,
id:i++
});
},
toggleTodo: (id)=>{
dispatch({
type: 'TOGGLE_TODO',
id: id
});
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
