javascript - react-redux 错误 : Actions must be plain objects. 使用自定义中间件进行异步操作

Question

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

Action 代码:

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

非常感谢。

Answer 1

您正在调度 Action 创建者函数而不是 Action

递增和递减函数称为 Action 创建者。他们返回操作对象。

您应该调用 Action 创建者函数来调度 Action 。

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