Redux Toolkit中TypeScript报错：修改函数参数state属性

这个错误的核心原因是你手动给state标注了LoginState类型，但Redux Toolkit通过Immer处理后的state实际是WritableDraft<LoginState>（可写的草稿类型），直接标注原始类型会让TypeScript认为state是不可变的，从而触发赋值错误。

解决方案1：让createSlice自动推导state类型（推荐） #

去掉state参数的手动类型标注，createSlice会根据initialState自动推断出正确的WritableDraft<LoginState>类型：

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(authUser.pending, (state) => {
        state.loading = 'pending';
      })
      .addCase(authUser.rejected, (state, action) => {
        state.loading = 'failed';
        console.log('action', action);
      });
  },
});

解决方案2：手动标注正确的WritableDraft类型 #

如果你需要显式标注类型，需导入WritableDraft并使用它：

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

// ...

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(authUser.pending, (state: WritableDraft<LoginState>) => {
        state.loading = 'pending';
      })
      .addCase(authUser.rejected, (state: WritableDraft<LoginState>, action) => {
        state.loading = 'failed';
        console.log('action', action);
      });
  },
});

额外检查：tsconfig配置 #

如果你的项目启用了no-param-reassign规则，可能也会触发这个错误。可以在tsconfig.json中禁用该规则，或者在相关代码行添加// @ts-ignore注释（不推荐），但更推荐使用前两种方案，因为它们符合Redux Toolkit的类型设计。

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