Question

我有一个名为actions的文件夹，其中包含一个名为index.js的文件，到目前为止我已将所有操作都放入其中。它现在变得非常混乱，我想知道如何最好地拆分东西。有什么好的策略吗？你把它们放在不同的文件中吗？由...组成？或者你只是将它们作为局部文件保存在不同的文件中，然后将它们包含在索引文件中，然后始终只导入索引文件？

Answer 1

将所有内容放在一个action.js中会很快失去控制，对于reducers来说也是如此。

这实际上归结为个人品味，但我所看到的趋势似乎是将应用程序分离为功能，其中每个功能都通过自己的操作隔离，并且还为每个功能提供减速器。

然后，应用程序树的每个级别都会组合Reducer，您的商店最终会看起来像文件夹结构，从而更容易找到。一个功能通常包含actions.js，reducer，js，index.jsx以及该功能的style.scss / css。这样做的优点是，在某些时候删除该功能非常容易，而无需在整个地方挖掘死代码。

您没有提及如何捆绑代码。使用ex Webpack构建时，这种方法很不错。

Answer 2

您可以使用bindActionCreators（http://redux.js.org/docs/api/bindActionCreators.html）。

小例子：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux';
import * as filterActions from '../actions/filterActions';
import * as writeActions from '../actions/writeActions';

class TestComponent extends Component {
  render(){
    return <div>Test</div>;
  }
}


function mapDispatchToProps(dispatch){
  return {
    filterActions: bindActionCreators(filterActions, dispatch),
    writeActions: bindActionCreators(writeActions, dispatch)
  };
}

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

这会将操作添加到组件的props（在mapDispatchToProps中的返回对象中使用的键）。因此，如果您想使用filterActions中的操作，可以使用this.props.filterActions.actionName()。

你如何在Redux中组织行动？

2 个答案: