Redux Toolkit结合TypeScript：如何为Reducer指定返回类型？

开发者阿泽

2026-8-14

Redux Toolkit + TypeScript Reducer 返回类型问题解决

首先明确：Redux Toolkit（RTK）的Reducer默认集成了Immer库，允许你用直接修改state的"可变"写法，不需要手动返回新状态对象——这是RTK核心特性之一，也是你当前问题的关键误区。

你的代码问题分析

你当前手动返回新对象的写法，如果Slice State包含cards以外的其他字段，仅返回{ cards: ... }会导致返回对象与State类型不匹配，TypeScript报错，所以只能用any绕过。即使State只有cards字段，这种写法也不符合RTK最佳实践。

正确的两种写法

写法1：推荐（Immer可变写法，无需返回类型）

直接修改state，Immer会自动生成不可变的新状态，TypeScript自动推断类型，无需手动指定返回值：

// 假设你的Slice State类型定义
interface CardState {
  cards: Card[];
}

interface Card {
  id: string;
}

type DeleteCard = string;

// 正确的reducer写法
deleteCard: (state, { payload }: PayloadAction<DeleteCard>) => {
  // 直接修改state，Immer处理不可变更新
  state.cards = state.cards.filter(card => card.id !== payload);
}

写法2：手动返回完整状态（需指定正确返回类型）

如果坚持手动返回新状态，必须确保返回完整的State对象（包含所有字段），并指定返回类型为你的Slice State接口：

deleteCard: (state, { payload }: PayloadAction<DeleteCard>): CardState => {
  // 展开原state所有字段，避免丢失其他属性
  return {
    ...state,
    cards: [...state.cards.filter(card => card.id !== payload)]
  };
}