升级Redux-Toolkit2.0与Redux5.0后extraReducer语法错误求助

你的代码存在多个语法和API使用错误，导致了「Expression expected」提示，以下是具体问题和修复方案：

核心错误点及修复 #

1. initialState定义错误 #

你错误地使用createReducer来初始化状态，正确做法是单独定义initialState变量：

const initialState = {
  form: [],
  status: null,
};

2. extraReducers中builder API使用错误 #

RTK 2.0要求通过builder.addCase()绑定异步thunk的状态，而非builder.getform()这种无效写法。同时，异步thunk的pending/fulfilled/rejected状态需要通过thunk对象的属性获取（如getform.pending）。

3. 语法错误：多余逗号 #

每个builder调用后的逗号会触发语法错误，改用链式调用（builder.addCase().addCase()）即可避免。

4. 异步thunk类型重复 #

updateform的action类型和deleteform重复（均为"form/deleteForm"），会导致状态更新冲突，需修改为唯一值：

export const updateform = createAsyncThunk(
  "form/updateForm", // 修正为唯一类型
  async ({ id, form }) => { /* ... */ }
);

5. catch块未抛出错误 #

异步thunk的catch块若不抛出错误，rejected状态不会被触发，需添加throw error：

catch (error) {
  throw error;
}

修正后的完整代码 #

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

// 初始化状态
const initialState = {
  form: [],
  status: null,
};

export const getform = createAsyncThunk("form/getForm", async () => {
  try {
    const result = await axios.get("http://localhost:5000/autoroute/");
    return result.data;
  } catch (error) {
    throw error;
  }
});

export const addform = createAsyncThunk("form/add", async (form) => {
  try {
    const result = await axios.post("http://localhost:5000/autoroute/", form);
    return result.data;
  } catch (error) {
    throw error;
  }
});

export const deleteform = createAsyncThunk("form/deleteForm", async (id) => {
  try {
    const result = await axios.delete(`http://localhost:5000/autoroute/${id}`);
    return result.data;
  } catch (error) {
    throw error;
  }
});

export const updateform = createAsyncThunk(
  "form/updateForm",
  async ({ id, form }) => {
    try {
      const result = await axios.put(
        `http://localhost:5000/autoroute/${id}`,
        form
      );
      return result.data;
    } catch (error) {
      throw error;
    }
  }
);

export const formSlice = createSlice({
  name: "form",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getform.pending, (state) => {
        state.status = "pending";
      })
      .addCase(getform.fulfilled, (state, action) => {
        state.status = "success";
        state.form = action.payload;
      })
      .addCase(getform.rejected, (state) => {
        state.status = "fail";
      })
      .addCase(addform.fulfilled, (state, action) => {
        state.form.push(action.payload);
      })
      .addCase(deleteform.fulfilled, (state, action) => {
        state.form = state.form.filter(item => item.id !== action.payload.id);
      })
      .addCase(updateform.fulfilled, (state, action) => {
        const index = state.form.findIndex(item => item.id === action.payload.id);
        if (index !== -1) {
          state.form[index] = action.payload;
        }
      });
  },
});

export default formSlice.reducer;

额外说明 #

• 补充了fulfilled状态下的实际数据更新逻辑（如新增/删除/修改列表项），这是原代码缺失的核心功能。
• RTK 2.0的builder模式是强制推荐写法，替代了旧版本的对象式extraReducers，确保类型安全和兼容性。

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