在没有 Dispatch 函数的情况下在 React 上使用操作是否正确？

Question

我正在 React 上实现 Redux，它目前正在运行，但我不确定它是否正确。我有一个包含 3 个文件的 redux 文件夹：actions、reducers 和 store。

Actions 有这个代码：

export const SETTER_USER = "SETTER_USER"

export const setterUserAction = ({ email, username, role, lastVideo }) => ({
  type: SETTER_USER,
  payload: { email, username, role, lastVideo }
})

我从组件调用这个动作，这是组件上的代码：

import React, { useState, useEffect } from "react";
import { connect } from 'react-redux'
import { setterUserAction } from '../../redux/actions'
...

const Login = ({ navigation, user, setUser }) => {
...
}

const mapStateToProps = state => ({
  user: state.user
})

const mapDispatchToProps = ({
  setUser: setterUserAction
})

export default connect(mapStateToProps, mapDispatchToProps)(Login)

我曾经在组件内部有action，我可以想象这并不理想。所以我把它移到了一个 actions.js 文件中。但是现在我没有使用 dispatch 函数，这感觉很奇怪，因为 dispatch 是整个模式的一部分。所以你怎么看？这是否正确实施？还是只是靠运气？

Answer 1

您将mapDispatchToProps 定义为一个对象。由react-redux 团队推荐：您可以在此处阅读更多信息：https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-mapdispatchtoprops-as-an-object

我们建议始终使用 mapDispatchToProps 的“对象速记”形式，除非您有特定的原因来自定义调度行为。

更新：如果你使用带有 Hook 的 Function 组件，你应该使用 React-Redux 钩子 API：https://react-redux.js.org/api/hooks

我们建议使用 React-Redux 钩子 API 作为 React 组件中的默认方法。 现有的连接 API 仍然有效，并将继续受到支持，但钩子 API 更简单，并且与 TypeScript 配合得更好。

但是如果你使用的是类组件。您应该将connect 与mapDispatchToProps 一起用作对象而不是函数。