Redux调用dispatch时出现Actions must be plain objects错误如何解决

Redux 默认的 dispatch 方法仅支持接收普通 JavaScript 对象作为 action，你当前调用的 ListClients()、ListUsers() 执行后返回的是 Promise 类型，不符合默认规则，因此触发报错。

• 首先确认你的 Redux store 配置中是否引入了支持异步操作的中间件，比如 redux-thunk、redux-saga 等，未配置中间件的情况下 dispatch 无法处理非普通对象类型的 action。
• 其次检查 ListClients、ListUsers 两个 action creator 的代码逻辑，确认是否直接返回了接口请求的 Promise，没有按照异步中间件要求的格式包装。

方案1：适配传统 Redux 项目（基于 redux-thunk） #

1. 安装 redux-thunk 依赖

npm install redux-thunk

2. 调整 store 配置，注入 thunk 中间件

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

const store = createStore(rootReducer, applyMiddleware(thunk));

3. 调整异步 action creator 写法，改为返回接收 dispatch 作为参数的函数，在函数内部执行异步逻辑后手动 dispatch 普通 action

// 错误写法：直接返回 Promise
const ListClients = async () => {
  const res = await axios.get('/api/clients');
  return { type: 'FETCH_CLIENTS_SUCCESS', payload: res.data };
}

// 正确写法：返回函数，异步逻辑在函数内执行
const ListClients = () => {
  return async (dispatch) => {
    const res = await axios.get('/api/clients');
    dispatch({ type: 'FETCH_CLIENTS_SUCCESS', payload: res.data });
  }
}
// ListUsers 按照同样逻辑调整即可

调整完成后原组件内的 dispatch 代码无需修改即可正常运行。

方案2：适配 Redux Toolkit 项目（官方推荐写法） #

Redux Toolkit 默认内置了 thunk 中间件，无需额外安装配置，直接使用 createAsyncThunk 定义异步 action 即可：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

// 定义异步action
export const ListClients = createAsyncThunk('clients/fetchList', async () => {
  const res = await axios.get('/api/clients');
  return res.data;
});
export const ListUsers = createAsyncThunk('users/fetchList', async () => {
  const res = await axios.get('/api/users');
  return res.data;
});

// 在slice中处理异步action的不同状态
const clientSlice = createSlice({
  name: 'clients',
  initialState: { list: [], loading: false },
  extraReducers: (builder) => {
    builder
      .addCase(ListClients.pending, (state) => {
        state.loading = true;
      })
      .addCase(ListClients.fulfilled, (state, action) => {
        state.loading = false;
        state.list = action.payload;
      })
  }
})

内容的提问来源于stack exchange，提问作者Ala Ben Aicha