无法理解redux中connect的作用

Question

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters } from '../actions'
import AddTodo from '../components/AddTodo'
import TodoList from '../components/TodoList'
import Footer from '../components/Footer'

class App extends Component {
  render() {
    // Injected by connect() call:
    const { dispatch, visibleTodos, visibilityFilter } = this.props
    return (
      <div>
        <AddTodo
          onAddClick={text =>
            dispatch(addTodo(text))
          } />
        <TodoList
          todos={visibleTodos}
          onTodoClick={index =>
            dispatch(completeTodo(index))
          } />
        <Footer
          filter={visibilityFilter}
          onFilterChange={nextFilter =>
            dispatch(setVisibilityFilter(nextFilter))
          } />
      </div>
    )
  }
}

App.propTypes = {
  visibleTodos: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.isRequired,
    completed: PropTypes.bool.isRequired
  }).isRequired).isRequired,
  visibilityFilter: PropTypes.oneOf([
    'SHOW_ALL',
    'SHOW_COMPLETED',
    'SHOW_ACTIVE'
  ]).isRequired
}

function selectTodos(todos, filter) {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(todo => todo.completed)
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(todo => !todo.completed)
  }
}

// Which props do we want to inject, given the global state?
// Note: use https://github.com/faassen/reselect for better performance.
function select(state) {
  return {
    visibleTodos: selectTodos(state.todos, state.visibilityFilter),
    visibilityFilter: state.visibilityFilter
  }
}

// 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；

const { dispatch, visibleTodos, visibilityFilter } = this.props这行代码怎么理解？dispatch哪里来的？

无法理解这行export default connect(select)(App)中connect的作用

这个是把select这个函数绑定到App的意思？参数又是什么？

Answer 1

关于connect的作用

connect的作用很好理解啊，用来连接组件和redux啊！不然你怎么获取redux中的数据。打个比方就是，假设你是淘宝买家，redux是淘宝卖家，你看中了一款东西，你付了款了，淘宝卖家是不是要把东西给你。怎么到你手上呢？是不是要通过物流才行？那么connect就是扮演物流的角色啊。这样你应该可以理解了吧！

connect有两个参数mapStateToProps和mapDispatchToProps。关于这个两个参数的理解，打个比方。快递大家都有用过，这里props好比你们这家这边的快递网点。物流公司的快递是不是首先得进到快递网点，然后你去快递网点拿东西吧！mapStateToProps就好比物流公司分发快递到物流网点的操作，最后给网点的是一堆快递，所以mapStateToProps 应该有一个return ，并且return的是一个对象。你一般寄快递都是从物流网点填写单子并把寄的东西给物流网点，然后物流网点把你的单子和东西交给物流公司，物流公司再把它带到目的地。如果物流公司不让这个网点做代寄的业务，你是不是就不能去网点寄东西了。mapDispatchToProps作用就在此，我得让这个网点可以寄东西，我才能在这个网点寄东西吧。Dispatch好比寄快递业务，Props是物流网点，自己翻译一下mapDispatchToProps，就是就快递业务授权给物流网点。寄快递业务也分为好几种，那么Dispatch也是一样的。

const { dispatch, visibleTodos, visibilityFilter } = this.props这行代码怎么理解？dispatch哪里来的？

首先这是一个es6的解构操作，阮一峰老师的es6教程里面有。props上面将其类比为快递网点，那么这里visibleTodos和visibilityFilter就好比两个快递，dispatch就是一个寄快递的服务。如果你想寄快递的话，你就使用这个服务。

Answer 2

你可以简单的理解为。
将数据源绑定到你具体的应用中。
Data ==(bind)==> App

然后

App 就可以各种 get Data了。
当然 Connect的时候 直接Mapping。就是你需要什么参数，都可以配置。
具体就看redux的文档。

Answer 3

connect的参数有两个：
connect(mapStateToProps, mapDispatchToProps）
见名知意。
第一个参数将state里的数据映射到组件的props里面。
第二个参数将将action函数映射到props里面。
然后你就可以在组件内部通过props获取。
这里的select就是第一个参数

Answer 4

你可以这么理解，connect这步操作，相当于把你原来的组件又包了一层，并且传进去三个属性。
一个是dispatch函数，一个是mapStateToProps函数返回的值，一个是mapDispatchToProps返回的值。

你如果理解higher-order-components 是什么，那么connect这种函数的作用就很清楚了。