如何在Redux Toolkit的createSlice中结合Builder语法与自动生成Action Creator？

解决方案与官方推荐用法 #

核心概念区分 #

• reducers：用于定义当前Slice专属的状态更新逻辑，RTK会自动为每个reducer生成对应的强类型Action Creator，且原生支持Immer的可变式更新（无需手动处理不可变拷贝）。RTK 1.9+版本开始，reducers也支持Builder语法。
• extraReducers：仅用于处理外部Action（如其他Slice的Action、手动createAction创建的Action、RTK Query异步状态Action等），不会生成Action Creator，仅绑定已有Action的状态更新逻辑。

方式1：reducers + Builder语法（推荐，RTK 1.9+） #

直接在reducers中使用Builder语法，既能获得自动生成的Action Creator，又能享受Builder的类型提示：

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

export const mySlice = createSlice({
  name: 'x',
  initialState,
  reducers: (builder) => {
    builder.addCase('setModel', (state, action: PayloadAction<Model>) => {
      // Immer自动处理不可变更新，无需return state
      state.model = action.payload;
    });
  },
});

// 自动生成的强类型Action Creator
export const { setModel } = mySlice.actions;

组件中直接使用：

const dispatch = useDispatch();
dispatch(setModel(pickedItem));

方式2：传统reducers对象写法（兼容旧版RTK） #

如果使用的是RTK 1.9以下版本，直接在reducers中定义函数即可，同样自动生成Action Creator：

export const mySlice = createSlice({
  name: 'x',
  initialState,
  reducers: {
    setModel: (state, action: PayloadAction<Model>) => {
      state.model = action.payload;
    },
  },
});

export const { setModel } = mySlice.actions;

关于你之前写法的问题 #

你手动创建的setModel属于外部Action，extraReducers仅负责绑定它的状态更新逻辑，但不会将其加入mySlice.actions。如果一定要复用这个手动Action，需要直接dispatch它：

// 直接dispatch手动创建的Action
dispatch(setModel(pickedItem));

但这种写法完全没必要——RTK的createSlice已经能自动生成带类型的Action Creator，无需手动调用createAction。

官方推荐的createSlice使用模式 #

1. 优先通过reducers字段定义当前Slice的所有专属Action，利用RTK自动生成的Action Creator，减少手动代码维护。
2. 仅在需要处理外部Action时（如跨Slice的状态更新、RTK Query的异步生命周期Action），才使用extraReducers。
3. 全程使用Immer的可变式更新语法，无需手动返回新状态或做不可变拷贝，简化代码。

内容的提问来源于stack exchange，提问作者Can Poyrazoğlu