redux 的action creator 解决冲突

@eyasliu 2016-05-14 05:20:58发表于 eyasliu/blog

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';
/* 其他不用变 */