create-react-app (react redux) 连接中的多个动作

Question

我正在使用 Redux 使用 Create-React-App 创建 React 应用程序。

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

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

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

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) 连接中的多个动作

create-react-app (react redux) Multiple actions in connect

reactjs

react-redux

create-react-app