如何解决Redux报错"Actions must be plain objects. Use custom middleware for async actions."？

你遇到的这个报错是Redux使用Thunk时的高频问题，我帮你梳理两个最可能的原因和对应的解决办法：

1. Thunk Action的参数顺序写反了 #

你的fetchUser action里把getState放在了dispatch前面，但Redux Thunk规定的函数参数顺序是先dispatch，后getState。顺序错了之后，你代码里调用的dispatch其实是getState方法——这是用来获取状态的函数，根本不是分发action的工具，自然会触发"必须是纯对象action"的报错。

修正后的action代码： #

export const fetchUser = () => async (dispatch, getState) => { // 调换dispatch和getState的顺序
  if (getIsFetching(getState().user)) {
    return Promise.resolve();
  }
  dispatch(fetchUserRequest());
  try {
    const response = await api.fetchUser();
    dispatch(fetchUserSuccess({ userObject: { ...response } }));
  } catch (error) {
    dispatch(fetchUserFailure({ message: "Could not fetch user profile." }));
  }
};

2. Redux Store没正确配置Thunk中间件 #

如果参数顺序改完还是报错，那大概率是你的Store没添加Thunk中间件。Redux默认只认同步的纯对象action，异步action必须靠Thunk中间件来处理返回函数的特殊情况。

传统Redux（非Redux Toolkit）配置方式： #

如果你用createStore创建Store，得手动导入并添加Thunk：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // 这里必须添加Thunk中间件
);

Redux Toolkit配置方式： #

如果用的是Redux Toolkit（现在推荐的现代Redux写法），它默认已经内置了Thunk，只要用configureStore创建Store就不用额外配置：

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

const store = configureStore({
  reducer: {
    user: userReducer
  }
});

要是你手动修改了middleware数组，记得要保留Thunk，比如：

import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import userReducer from './userSlice';

const store = configureStore({
  reducer: {
    user: userReducer
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk)
});

不过通常getDefaultMiddleware已经包含Thunk，除非你主动移除了默认中间件，否则不需要额外加。

验证步骤 #

1. 先修正action里的参数顺序，把dispatch放在第一个位置
2. 检查Store配置，确保Thunk中间件已经正确添加
3. 重新运行代码，应该就能解决这个报错了

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