ReactJS - 将对象传递给动作时出错答案

【问题标题】：ReactJS - error passing an object to the actionReactJS - 将对象传递给动作时出错
【发布时间】：2020-04-18 04:10:54
【问题描述】：

目标是将对象从我的表单发送到我的操作。（没有异步）

我不断收到“操作必须是普通对象。为异步操作使用自定义中间件。”

我有这样的操作（我可以控制台记录 productType 和产品，数据正在进入我的操作，但我不断收到上面提到的控制台错误）：

export function addProduct(productType, product) {
  switch (productType) {
    case 'survey':
      return {
        type: actions.ADD_SURVEY,
        payload: product,
      }

    case 'reward':
      return {
        type: actions.ADD_REWARD,
        payload: product,
      }

    default:
      return null
  }
}

在我的组件中，我正在调用我的操作（数据是我表单中的对象）：

import { useDispatch } from 'react-redux'

 const dispatch = useDispatch()

function onSubmit(data) {
  const productType = 'reward'
  dispatch(addProductAction({ productType, data }))
}

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/a/46766200/10431732

标签： javascript reactjs react-redux

【解决方案1】：

当你派发一个动作时，你将一个对象传递给你的动作创建者

dispatch(addProductAction({ productType, data }))

但是您的动作创建者需要 2 个参数，productType 和 product。你传递给你的动作创建者的对象被分配给你的动作创建者使用的第一个参数，即productType。

在动作创建器中，您在switch 语句中使用productType。您希望它是string，但它是一个对象。因此，您的默认案例运行并从您的操作创建者返回 null。

您可以解构传递给动作创建者的对象，然后在switch 语句中使用productType。如下所示更改您的动作创建者

export function addProduct({productType, data}) {
  switch (productType) {
    case 'survey':
      return {
        type: actions.ADD_SURVEY,
        payload: data,
      }

    case 'reward':
      return {
        type: actions.ADD_REWARD,
        payload: data,
      }

    default:
      return null
  }
}

或

在调度动作时，您不能将对象传递给动作创建者

改变

dispatch(addProductAction({ productType, data }))

到

dispatch(addProductAction(productType, data))

【讨论】：

很好的解释，我明白了。谢谢优素福

【解决方案2】：

您需要在您的动作创建者中触发调度。反之亦然。

你可以这样做：

import store from './path/to/store'

const dispatch = store.dispatch

export function addProduct(productType, product) {
  switch (productType) {
    case 'survey':
      dispatch({ type: actions.ADD_SURVEY, payload: product })

    case 'reward':
      dispatch({ type: actions.ADD_REWARD, payload: product})

    default:
      return null
  }
}

import { addProduct } from './path/to/actions'

function onSubmit(data) {
  const productType = 'reward'
  addProduct(productType, data)
}

如果你想在你的 React 组件中使用 dispatch hook，你必须传递一个普通的对象，比如dispatch({ action: 'action', payload: data })

【讨论】：