react-redux 错误：操作必须是普通对象。使用自定义中间件进行异步操作答案

【问题标题】：react-redux Error: Actions must be plain objects. Use custom middleware for async actionsreact-redux 错误：操作必须是普通对象。使用自定义中间件进行异步操作
【发布时间】：2021-01-02 10:17:03
【问题描述】：

我有一个非常简单的代码，用于在按下 + 或 - 按钮时递增和递减。但是每当我按下按钮时，我都会收到错误消息。我已经研究了大约 4 个小时，但找不到原因。我很确定我没有执行任何异步操作并且我的操作正在返回 JavaScript 对象

动作代码：

export const increment = () => {
    return { type: 'INCREMENT' }
}

export const decrement = () => {
    return { type: 'DECREMENT' }
}

reducer 代码：

export default function counterReducer(state = 0, action) {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1
      case 'DECREMENT':
        return state - 1
      default:
        return state
    }
  }

应用组件代码：

import React from "react";
import {decrement, increment } from "./actions";
import { useSelector, useDispatch } from "react-redux";
export default function App() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment)}>+</button>
      <button onClick={() => dispatch(decrement)}>-</button>
      <p>{counter}</p>
    </div>
  );
}

非常感谢。

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

您正在调度动作创建函数而不是动作

递增和递减函数称为动作创建器。它们返回动作对象。

您应该调用动作创建函数来调度动作。

<button onClick={() => dispatch(**increment()**)}>+</button>

【讨论】：

【解决方案2】：

在 Redux 中，actions are objects。您必须将操作函数执行到调度中：dispatch(increment) 可能是 dispatch(increment())

【讨论】：

【解决方案3】：

这个问题可以通过在商店中使用像 redux-thunk 或 saga 这样的中间件来解决配置。

import { createStore, applyMiddleware } from "redux";

import rootReducer from "../reducers";
import thunk from "redux-thunk";

//Applying redux-thunk solves the problem
//Actions must be plain objects. Use custom middleware for async actions.

export const store = createStore(rootReducer, applyMiddleware(thunk));

【讨论】：