Redux Toolkit中无法追加Reducer状态的问题求助

问题原因 #

你的代码里初始状态initialState没有定义data属性，第一次触发success action时，state.data还是undefined，调用数组方法（concat/展开语法）自然会报错。另外当前代码是直接赋值state.data = action.payload，这会覆盖原有数据而非追加。

修复方案 #

1. 初始化state.data为空数组 #

先把initialState里的data初始化为空数组，确保第一次操作时state.data是合法的数组：

const initialState = {
  loading: false,
  data: [], // 初始化空数组
  error: null
};

2. 在success case中追加数据 #

根据action.payload的类型（单个数据/数组），选择合适的追加方式：

如果action.payload是数组（批量追加）：

.addCase(success, (state, action) => {
  state.loading = false;
  // 用展开语法追加数组
  state.data = [...state.data, ...action.payload];
  // 或者用concat（返回新数组）
  // state.data = state.data.concat(action.payload);
  // 或者直接用push（Immer允许直接修改数组）
  // state.data.push(...action.payload);
})

如果action.payload是单个数据：

.addCase(success, (state, action) => {
  state.loading = false;
  state.data.push(action.payload);
})

完整修改后的代码 #

import { createAction, createReducer } from "@reduxjs/toolkit";

// 初始化完整的state结构
const initialState = {
  loading: false,
  data: [],
  error: null
};

const request = createAction("allDataRequest");
const success = createAction("allDataSuccess");
const fail = createAction("allDataFailure");
const clear = createAction("clearErrors");

export const allServicesReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(request, (state) => {
      state.loading = true;
    })
    .addCase(success, (state, action) => {
      state.loading = false;
      // 这里根据payload类型选择追加方式，示例为批量追加数组
      state.data = [...state.data, ...action.payload];
    })
    .addCase(fail, (state, action) => {
      state.loading = false;
      state.error = action.payload;
    })
    .addCase(clear, (state) => {
      state.error = null;
    });
});

额外说明 #

• Redux Toolkit内置Immer，允许你直接修改state（比如数组push），Immer会自动转换为不可变更新。
• 确保action.payload的类型和你处理的逻辑匹配：如果是单个对象就用push，如果是数组就用展开/concat/push(...payload)。

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