我有一个非常简单的代码,用于在按下 + 或 - 按钮时递增和递减。但是每当我按下按钮时,我都会收到错误消息。我已经为此工作了大约 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>
);
}
非常感谢。
最佳答案
您正在调度 Action 创建者函数而不是 Action
递增和递减函数称为 Action 创建者。他们返回操作对象。
您应该调用 Action 创建者函数来调度 Action 。
<button onClick={() => dispatch(**increment()**)}>+</button>
关于javascript - react-redux 错误 : Actions must be plain objects. 使用自定义中间件进行异步操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65538014/