create-react-app (react redux) 连接中的多个操作答案

【问题标题】：create-react-app (react redux) Multiple actions in connectcreate-react-app (react redux) 连接中的多个操作
【发布时间】：2018-07-01 21:29:41
【问题描述】：

我正在使用 Redux 创建一个带有 Create-React-App 的 React 应用程序。

按照教程，所有动作都放在一个文件中：

src\action\index.js

export const fetchUser = (useCache = false) => async dispatch => { .. }
export const getUser = (useCache = false) => async dispatch => { .. }
export const fetchAlerts = (useCache = true) => async dispatch => { .. }

然后我使用 Connect 将它们连接到我的组件：

import * as actions from "../../actions";

....

export default connect(mapStateToProps, actions)(Home);

但是，我想将我的操作组织到文件中，在此示例中具有帐户操作和警报操作。而且我可能想从 1 组件中的每个操作调用函数。

我遇到的问题是我不知道如何将多个操作添加到 1 connect 语句中：

export default connect(mapStateToProps, actions)(Home);

动作接受对象或函数...数组不起作用..

【问题讨论】：

如果我是正确的，您想在 Home 组件中映射所有这些操作吗？
是的，没错。我想在文件中逻辑拆分代码，但我也想访问所有帐户和警报操作
我已经添加了答案，您通常如何将多个调度操作作为道具映射到您的组件

标签： reactjs react-redux create-react-app

【解决方案1】：

你快到了，因为你知道 connect() 的 mapDispatchToProp 参数也可以是对象，你可以随时使用

Object.assign({}, userAction, alertAction)

或使用对象扩展运算符

{...userAction, ...alertAction}

【讨论】：

【解决方案2】：

要使用 redux 将所有操作映射到 Home 组件，您可以执行以下操作：

import * as actions from "../../actions";

const mapDispatchToProps = dispatch => {
  return {
    fetchUser: (useCache = false) => dispatch(fetchUser),
    getUser: (useCache = false) => dispatch(getUser),
    fetchAlerts: (useCache = true) => dispatch(fetchAlerts)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

看看这是否有帮助。

【讨论】：