在Redux非异步代码中触发‘Actions must be plain objects’错误的解决方法

你遇到的这个错误是因为组件里错误使用了dispatch和状态获取方式，具体问题有两处：

1. 错误调用useAppDispatch：
   你写的useAppDispatch(increment())完全不符合规范——useAppDispatch是用来获取Redux的dispatch函数，不是直接传执行后的action。现在的写法等于提前执行increment()生成了action对象，然后把这个对象传给了本应返回dispatch函数的hook，最终导致按钮绑定的是一个action对象而非触发dispatch的函数，这就触发了"Actions must be plain objects"的错误。

2. 直接调用store.getState()获取状态：
   这种方式不会触发组件重新渲染，就算状态更新，页面上的count也不会同步变化，必须用自定义的useAppSelector来获取状态。

修正后的CounterPage.tsx代码 #

import { useAppDispatch, useAppSelector } from '../../hooks/storeHooks';
import { increment, selectCount } from '../../store/features/counter/counterSlice';

export const CounterPage = () => {
    // 用useAppSelector替代直接调用store.getState()
    const count = useAppSelector(selectCount);
    // 先获取dispatch函数
    const dispatch = useAppDispatch();

    return (
        <ErrorBoundary>
            <h1>Counter</h1>
            <span>Counter: {count}</span>
            {/* 在点击事件里调用dispatch并传入action */}
            <button onClick={() => dispatch(increment())}>Increment counter</button>
        </ErrorBoundary>
    );
};

修正说明 #

• 用useAppSelector(selectCount)获取状态：状态变化时组件会自动重新渲染，同步更新页面上的count值。
• 先调用useAppDispatch()拿到dispatch函数，再在按钮点击事件中通过箭头函数触发dispatch(increment())：确保每次点击按钮才会分发action，符合Redux的使用逻辑。

内容的提问来源于stack exchange，提问作者erol_smsr