React和Redux 之间的依赖注入connect（mapStateToProps、mapDispatchToProps）

在理解react-redux通过connect连接的关系之前，需要重温下组件的概念，组件分为两大类：展示组件和容器组件。展示组件就是用l来显示UI的普通组件，不涉及业务逻辑和redux。容器组件的概念不容易理解，但它与展示组件之间却存在着明显不同特征。

1. 容器组件
容器组件是使用 store.subscribe() 从 Redux state 树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。

• 容器组件特征：

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

• 展示组件特征：

  • 只负责 UI 的呈现，不带有任何业务逻辑
  • 所有数据都由参数（this.props）提供
  • 不使用任何 Redux 的 API

2. connent()函数生成容器组件

import { connect } from 'react-redux'const VisibleTodoList = connect(    [mapStateToProps], //参数1将 store 中的数据作为 props 绑定到组件上     [mapDispatchToProps], //参数2将 action 作为 props 绑定到组件上。    [mergeProps], //参数3用于自定义merge流程，将stateProps 和 dispatchProps merge 到parentProps之后赋给组件。通常情况下，你可以不传这个参数，connect会使用 Object.assign。    [options] //如果指定这个参数，可以定制 connector 的行为。一般不用。)(TodoList)export default VisibleTodoList

上面代码中，TodoList 是 展示组件，VisibleTodoList 就是由 React-Redux 通过connect方法自动生成的容器组件。

3.mapStateToProps()将state节点注入到与view相关的组件上

使用 React Redux 库的 connect() 方法来生成容器组件前，需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。例如，VisibleTodoList 需要计算传到 TodoList 中的 todos，所以定义了根据 state.visibilityFilter 来过滤 state.todos 的方法，并在 mapStateToProps 中使用。

const getVisibleTodos = (todos, filter) => {  switch (filter) {    case 'SHOW_ALL':      return todos    case 'SHOW_COMPLETED':      return todos.filter(t => t.completed)    case 'SHOW_ACTIVE':      return todos.filter(t => !t.completed)  }}const mapStateToProps = (state) => {  return {    todos: getVisibleTodos(state.todos, state.visibilityFilter)  }}

4.mapDispatchToProps()将需要绑定的响应事件注入到组件上

除了读取 state，容器组件还能分发 action。类似的方式，可以定义 mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法。它可以是一个函数，也可以是一个对象。如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。

例如，我们希望 VisibleTodoList 向 TodoList 组件中注入一个叫 onTodoClick 的 props 中，还希望 onTodoClick 能分发 TOGGLE_TODO 这个 action：

const mapDispatchToProps = (  dispatch,  ownProps) => {  return {    onTodoClick: () => {      dispatch({        type: 'SET_VISIBILITY_FILTER',        filter: ownProps.filter      });    }  };}

function mapDispatchToProps(dispatch){    return {        ...bindActionCreators(action, dispatch)    }}// mapDispatchToProps()函数的bindActionCreators、action需要引入    // import * as action from '../action';    // import { bindActionCreators } from 'redux';------------------------------------------------------------------------// 多个action 引入import * as action from '../action';import * as action2 from '../../../inde/action';function mapDispatchToProps(dispatch){    return {        ...bindActionCreators(action, dispatch)        ...bindActionCreators(action2, dispatch)    }}------------------------------------------------------------------------// 引入一个action里面的多个方法import { activeOrAbandonedApproval, showSeller, getAddOrderDiscounts } from '../orderInfo/action'function mapDispatchToProps(dispatch) {  return {    ...bindActionCreators({ activeOrAbandonedApproval, showSeller, getAddOrderDiscounts }, dispatch)  }}//示例来自：http://blog.csdn.net/genius_yym/article/details/64130120