RTK Query中createSlice extraReducers更新状态失败求助

问题1：修改state属性写法失效，请求一直处于pending状态 #

原因分析 #

1. Reducer写法错误：你写的(state, action) => (state.userInfo = action.payload)本质是返回了action.payload，会直接替换整个slice的state，而非修改原state的userInfo属性，导致状态更新不符合预期。
2. RTK Query中间件未配置：如果store里没添加apiService.middleware，RTK Query的请求无法正常完成，会一直卡在pending状态。
3. Mutation触发或API响应异常：组件中未正确调用mutation的mutate方法，或者API请求本身失败（比如跨域、接口错误），导致没有触发matchFulfilled的reducer逻辑。

解决办法 #

1. 修正Reducer写法：直接修改state属性，不要返回赋值结果：

const userSlice = createSlice({
  name: "user",
  initialState: { userInfo: null },
  reducers: {
    userLogout: (state) => {
      // 重置为初始状态，直接修改state
      state.userInfo = null;
    },
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      apiService.endpoints.authRegister.matchFulfilled,
      (state, action) => {
        // 直接修改state的userInfo属性
        state.userInfo = action.payload;
      }
    );
    builder.addMatcher(
      apiService.endpoints.authLogin.matchFulfilled,
      (state, action) => {
        state.userInfo = action.payload;
      }
    );
  },
});

2. 检查Store配置：确保添加RTK Query的中间件并正确注册reducer：

import { configureStore } from '@reduxjs/toolkit';
import { apiService } from '../Services/serviceFeature';
import userReducer from './userSlice';

export const store = configureStore({
  reducer: {
    [apiService.reducerPath]: apiService.reducer,
    user: userReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiService.middleware), // 必须添加这行
});

3. 验证Mutation调用与API响应：
   • 在组件中正确使用mutation钩子：const [register] = apiService.useAuthRegisterMutation()，然后调用register(你的表单数据)
   • 打开浏览器开发者工具的网络面板，确认API请求返回2xx状态码，响应数据符合预期

问题2：直接返回payload导致初始状态结构丢失 #

原因分析 #

你的初始状态设为null，当reducer返回action.payload时，整个slice的state会被直接替换成payload的值，原来的结构（比如包含userInfo的对象）完全丢失，自然无法再通过state.products这类方式修改状态——因为此时state已经是payload的对象，而非你期望的包含多个属性的结构。

解决办法 #

保留初始的状态结构（比如{ userInfo: null }），采用修改原state属性的写法（即问题1中修正后的reducer写法）。这样：

• 初始状态会显示为{ userInfo: null }，在Redux DevTools中能看到完整结构
• 后续可以随时添加其他属性（比如products）到初始state，再通过reducer修改state.products = action.payload

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