bindActionCreators

 

 

在 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

没有介绍这个，react-redux，需要自动加入actions

 

connect

connect 会把State和dispatch转换成props传递给子组件。它看起来是下面这样的：

import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Component)

它会让我们传递一些参数：mapStateToProps，mapDispatchToProps，mergeProps（可不填）和React组件。

之后这个方法会进行一系列的黑魔法，把state，dispatch转换成props传到React组件上，返回给我们使用。

mapStateToProps：

mapStateToProps 是一个普通的函数。

当它被connect调用的时候会为它传递一个参数State。

mapStateToProps需要负责的事情就是 返回需要传递给子组件的State，返回需要传递给子组件的State，返回需要传递给子组件的State，（重要的事情说三遍。。。。）然后connect会拿到返回的数据写入到react组件中，然后组件中就可以通过props读取数据啦~~~~

它看起来是这样的：

function mapStateToProps(state) {
  return { list: state.list }
}

因为stat是全局State，里面包含整个项目的所有State，但是我不需要拿到所有State，我只拿到我需要的那部分State即可，所以需要返回 state.list 传递给组件

mapDispatchToProps：

与mapStateToProps很像，mapDispatchToProps也是一个普通的函数。

当它被connect调用的时候会为它传递一个参数dispatch。

mapDispatchToProps负责返回一个 dispatchProps

dispatchProps 是actionCreator的key和dispatch(action)的组合。

dispatchProps 看起来长这样：

{
  addItem: (text) => dispatch(action)
}

connect 收到这样的数据后，会把它放到React组件上。然后子组件就可以通过props拿到addItem并且使用啦。

this.props.addItem('Hello World~');

如果觉得复杂，不好理解，，那我用大白话描述一下

就是通过mapDispatchToProps这个方法，把actionCreator变成方法赋值到props，每当调用这个方法，就会更新State。。。。额，，这么说应该好理解了。。

bindActionCreators：

但如果我有很多个Action，总不能手动一个一个加。Redux提供了一个方法叫 bindActionCreators 。

bindActionCreators 的作用就是将 Actions 和 dispatch 组合起来生成mapDispatchToProps 需要生成的内容。

它看起来像这样：

let actions = {
  addItem: (text) => {
    type: types.ADD_ITEM,
    text
  }
}

bindActionCreators(actions, dispatch); // @return {addItem: (text) => dispatch({ type: types.ADD_ITEM, text })}