Redux Toolkit:错误:操作必须是纯对象。使用自定义中间件进行异步操作

Redux Toolkit是一个用于简化Redux开发的官方工具集。它提供了一组实用的函数和API，帮助开发者更轻松地编写Redux代码，并解决了一些常见的痛点。

在使用Redux Toolkit进行异步操作时，如果出现错误"操作必须是纯对象"，通常是因为在Redux中的action中使用了非纯对象的操作。Redux要求action必须是一个纯对象，即一个普通的JavaScript对象，而不是一个函数、Promise或其他类型的对象。

为了解决这个问题，可以使用Redux Toolkit提供的createAsyncThunk函数来处理异步操作。createAsyncThunk是一个高阶函数，它接受两个参数：一个字符串类型的action类型和一个异步的回调函数。回调函数可以返回一个Promise，用于执行异步操作，并在操作完成后返回结果。

下面是一个使用Redux Toolkit处理异步操作的示例：

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

// 创建异步操作的Thunk
const fetchUser = createAsyncThunk('user/fetchUser', async (userId, thunkAPI) => {
  // 执行异步操作，比如发送网络请求
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();

  return data;
});

// 创建slice
const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

// 导出reducer和异步操作的Thunk
export const { reducer } = userSlice;
export { fetchUser };

在上面的示例中，我们首先使用createAsyncThunk创建了一个名为'fetchUser'的异步操作Thunk。然后，在extraReducers中，我们根据不同的异步操作状态（pending、fulfilled、rejected）更新了state中的loading、data和error字段。

使用Redux Toolkit的createAsyncThunk可以更方便地处理异步操作，并且遵循Redux的规范。对于Redux Toolkit的更多信息和使用方法，可以参考腾讯云的Redux Toolkit产品介绍页面：Redux Toolkit产品介绍。