redux 的action creator 解决冲突

action creator

在使用redux的过程中，经常会使用一种函数叫action creator，他们专门为触发action而生，应用逻辑基本都是在这里执行，一个redux应用充斥着大批大批的action creator，所以action creator的模块化非常重要，否则项目进行到一定程度时将变得非常难以维护

模块化

通常我们将action的操作类型进行分组，比如一个post.js里面专门操作文章，photo.js里面专门操作相册。

组件绑定 action creator

在 react 应用中，绑定 action creator 使用 bindActionCreators 函数，参数传入一个都是纯函数的对象，将会把里面的函数全部放到props中。

如果对象中的元素不是函数，将会被 完全忽略

那么问题来了，如果我传入两个相同名字的函数的时候，肯定有一个会被覆盖。

// post.js 
export function getList(){}

// photo.js
export function getList(){}

// bind action creator
function mapDispatchProps(dispatch){
  return bindActionCreators({
    ...postAction,
    ...photoAction,
    fooObj: {} // 将会被忽略
  }, dispatch)
}

// component
this.props.getList()  // 哪个getList会被调用呢

但是那两个都是必须的，这个时候除了修改函数名外好像没有其它办法了。

redux-bind-action-groups

这时候有个插件出生了: redux-bind-action-groups , 他在 bindActionCreators 的基础上添加了对象的支持

分组

这时候，我觉得能把ac进行分组很有必要，在绑定 action creator 的时候，对象里面的元素依然是对象，在往里一层才是函数。而且为了兼容性，还可以传入函数，实现原来的操作，这样在迁移的时候可以不改动一行代码

function mapDispatchProps(dispatch){
  return bindActionCreators({
    postAction,
    photoAction,
    fooObj: () => {}
  }, dispatch)
}

this.props.postAction.getList();
this.props.photoAction.getList();
this.props.fooObj();

这时候，在将 bindActionCreators 替换成 redux-bind-action-groups 的时候，完全不用修改代码即可添加新功能

// old code
import {bindActionCreators} from 'redux';
function mapDispatchProps(dispatch){
  return bindActionCreators({
    ...
  }, dispatch)
}

// new code
import bindActionCreators from 'redux-bind-action-groups';
/* 其他不用变 */

eyasliu / blog