使用Redux Toolkit存储API数据报错：createSlice.extraReducers对象写法已移除

报错原因 #

Redux Toolkit 1.9.0及以上版本移除了createSlice.extraReducers的对象字面量写法，要求必须使用builder回调语法处理异步action。

修复步骤及完整代码 #

1. 修正异步Thunk的JSON解析问题

原代码中data.json()未添加await，会导致返回Promise而非实际JSON数据，需补上：

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

export const getAllJobs = createAsyncThunk("jobDetails/getAllJobs", async () => {
  const data = await fetch("http://localhost:3031/jobs");
  // 必须加await才能拿到解析后的JSON数据
  const result = await data.json();
  return result;
});

2. 改用builder回调重构extraReducers

替换原对象写法为builder的addCase链式调用：

export const jobDetailsSlice = createSlice({
  name: "jobDetails",
  initialState: {
    jobs: [],
    loading: false,
    error: null,
  },
  extraReducers: (builder) => {
    builder
      .addCase(getAllJobs.pending, (state) => {
        state.loading = true;
        state.error = null; // 清除之前的错误状态
      })
      .addCase(getAllJobs.fulfilled, (state, action) => {
        state.loading = false;
        state.jobs = action.payload; // 将API数据存入jobs状态
      })
      .addCase(getAllJobs.rejected, (state, action) => {
        state.loading = false;
        // 异步失败时优先取错误信息，兜底显示默认提示
        state.error = action.error?.message || "获取职位数据失败";
      });
  },
});

export default jobDetailsSlice.reducer;

3. Store代码无需修改（确认逻辑正确）

import { configureStore } from '@reduxjs/toolkit'
import jobDetailsReducer from '../features/jobSlice'

export const store = configureStore({
  reducer: {
    app: jobDetailsReducer
  },
})

使用说明 #

在组件中通过dispatch(getAllJobs())触发异步请求后，Redux会自动处理三种状态：请求中loading设为true，成功时将API返回数据存入state.app.jobs，失败时记录错误信息。

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