如何组织Redux Action-Creators以在Redux-React中使用

时间:2017-09-24 00:53:39

标签: redux react-redux redux-thunk

我正在使用react-redux&我的项目redux-thunk

我必须使用actionsconnect注入组件。

  

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

我的任务是一级。我不想只是以这种形式注入多个动作:

{
  doThis(),
  doThat()
}

但是以这种形式:

{
  this: {
    doThis1(),
    doThis2()
  }
  that: {
    doThat()
  }
}

所以基本上我的问题我想发送多个动作创建者文件,因为我希望它们组织起来。

我试过这个版本显然不起作用,因为每个 Thunk Action Creator 都没有注入调度:

import * as actions from './actions'

const mapDispatchToProps = (dispatch) => {
  return {
    dataActions: {
      ...actions.dataActions
    }
  };
}

export default connect(null, mapDispatchToProps)(Component);

所以我的最后一个问题是:

我是否应该以这种方式使用Redux?我可以这样组织我的文件,如果是这样的话?

1 个答案:

答案 0 :(得分:2)

如果您没有为每个动作创建者设置一个属性,而是希望在包含一组动作创建者的几个属性中构建绑定的动作创建者,则可以执行以下操作:

import { bindActionCreators, .. } from 'redux';
..
const mapDispatchToProps = (dispatch) => {
  return {
    dataActions: bindActionCreators(actions.dataActions, dispatch),
    otherActions: bindActionCreators(actions.otherActions, dispatch),
    ..        
  };
};

bindActionCreators的第一个参数是一个包含action-creator函数的对象(例如,只导出动作创建者的导入模块)。在您的实际组件中,您应该可以使用this.props.dataActions.someDataAction(..)

如果问题只是关于您是否可以将不同的动作创建者保存在不同的文件中,您可能甚至不想对动作创建者进行分组,只需执行此操作:

return {
  ...bindActionCreators(actionCreatorsFromOneModule, dispatch),
  ...bindActionCreators(actionCreatorsFromAnotherModule, dispatch),
  ..        
};