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

Question

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

动作代码：

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

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

减速机代码：

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

在 Redux 中， 动作是对象。 你必须在 dispatch(increment) 中执行 action 函数： dispatch(increment)可以是dispatch(increment())

Answer 2

您正在调度动作创建者功能而不是动作

递增和递减函数称为动作创建者。 他们返回操作 object。

您应该调用动作创建者 function 来调度动作。

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

Answer 3

这个问题可以通过在 store 配置中使用像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));