单个组件中的多个 actionCreators答案

【问题标题】：Multiple actionCreators in single component单个组件中的多个 actionCreators
【发布时间】：2018-02-24 23:34:45
【问题描述】：

我希望将多个 actionCreators 分派到一个组件中。我知道你可以用 state 做到这一点

export default connect(
    (state: ApplicationState) => Object.assign({}, state.search, state.resources),
    ResourcesState.actionCreators// i have another actionCreator I want to add 
)(Home) as typeof Home;

但不确定使用 actionCreators 执行此操作的语法。我已经阅读了

mapDispatchToProps

但不确定如何实现。

【问题讨论】：

标签： reactjs controller redux

【解决方案1】：

connect 的第二个参数接受一个对象，因此您可以使用 ES6 语法并避免使用 mapDispatchToProps。

import { yourAction } from './your_actions_folder'
class Home extends Component{
....
//For dispatch a action you only call the action Creator
this.props.yourAction()
}
export default connect(mapStateToProps,{yourAction})(Home)

【讨论】：

【解决方案2】：

有几种方法可以在 React 组件中设置 Redux 操作的调度：

使用connect(mapState)(MyComponent)。默认情况下，您的组件将获得props.dispatch，您可以调用props.dispatch({type : "SOME_ACTION"})。
传递一个mapDispatchToProps 函数作为连接的第二个参数。在内部，您可以创建调用dispatch 的新函数引用：
```
function mapDispatchToProps(dispatch) {
   return {
         addTodo : (text) => dispatch({type : "ADD_TODO", text})
   }
}
```

您也可以改用 Redux bindActionCreators 实用程序：

function mapDispatchToProps(dispatch) {
    return bindActionCreators({addTodo, toggleTodo}, dispatch);
}

最后，您可以将一个充满动作创建者的对象直接传递给connect：

const actions = {addTodo, toggleTodo};
export default connect(mapState, actions)(MyComponent);

我强烈推荐第四种方法，我也在我的博文Idiomatic Redux: Why Use Action Creators? 中谈到。

【讨论】：

【解决方案3】：

连接的第二个参数采用object 或function，因此您可以添加

export default connect(
    (state: ApplicationState) => Object.assign({}, state.search, state.resources),

    {
         ResourcesState.actionCreators,
         some_other_action_creators,
         some_more
    }
)(Home) as typeof Home;

另请阅读 Stackoverflow 上的此答案，了解有关如何使用动作创建者的更多信息

Why is there no need for a mapDispatchToProps function here?

【讨论】：

【解决方案4】：

mapDispatchToProps 是connect 中的第二个参数。比如：

import customAction from 'actions-directory-in-your-app'

const mapStateToProps = () => {} // no implementing anything for example purposes
const mapDispatchToProps = () => ({ customAction })

const ConnectedContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(YourContainer)

customAction 现在成为YourContainer 中的一个道具，因此您可以像使用组件中的其他道具一样使用它。

【讨论】：