Redux-connect( )介绍

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

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

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

但是，因为没有定义业务逻辑，上面这个容器组件毫无意义，只是 UI 组件的一个单纯的包装层。为了定义业务逻辑，需要给出下面两方面的信息。

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

connect方法的完整 API

import { connect } from 'react-redux'

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

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

我理解的mapStateToProps相当于是在store中读取数据，与reducer没有关系，哪的是已有的数据，而不是执行reducer获取的，可以打印下state看看，是一个对象，键名是reducer规则的名字，键值就是这个规则所对应的数据，如果说我们要获取store中对应的数据的话，就需要state.xxx(xxx表示我们定义的reducer规则)

mapDispatchToProps就是把action存到了一个名为userInfoActions的对象中了。如果说需要修改redux数据则需要通过action来完成，this.props.userInfoActions.xxxx(传参) (xxx表示action) （个人理解，如有错误，欢迎指正。）

    function mapStateToProps(state){
         console.log(state)
        return {
            userinfo : state.userinfo
        }
    }

    function mapDispatchToProps(dispatch){
        return {
            userInfoActions : bindActionCreators(userInfoActionsFromOtherFile,dispatch)
        }
    }   

mapStateToProps(state)，state就是store的全部状态，如果要获取某一个reduce的值就可以用state.xxx

eg:

const rootReducer = combineReducers({
    userinfo
})

//这是两个不同js文件的 演示方便 我写一起了。。。
function mapStateToProps(state) {
    return {
        //state就是store的全部状态，state.userinfo代表我只要userinfo(userinfo是一个reducer)返回的数据
        userinfo: state.userinfo
        //返回的userinfo就被做成了props 这样子就可以传递给木偶组件
    }
}

这两个函数的核心价值在于，它能把 redux 中的数据和操作函数，作为 props 赋值到 react 组件中，这样就可以直接在 react 组件中进行操作——这样才是将 redux 和react 结合起来了