Question

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

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

SRC \动作\ 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连接声明中添加多个动作：

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

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

Answer 1

你几乎就在那里，因为你知道connect（）的mapDispatchToProp参数也可以是对象，你可以随时使用

Object.assign({}, userAction, alertAction)

或使用对象扩展运算符

{...userAction, ...alertAction}

Answer 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);

看看这是否有帮助。

create-react-app（react redux）连接中的多个动作

2 个答案: