如何用TypeScript结合Redux Toolkit约束Action的Payload类型？

完全可行，只需要通过TypeScript接口结合Redux Toolkit的PayloadAction来约束Action的payload类型，就能避免传入任意内容的问题。具体实现方式如下：

1. 定义Payload的类型接口
   先明确你期望的payload结构，比如筛选器的参数：

// 定义筛选器payload的结构
interface FiltersPayload {
  keyword?: string;
  category?: string;
  priceRange?: [number, number];
}

2. 在Slice的reducer中用PayloadAction约束类型
   创建Slice时，在对应的reducer函数里，给action参数指定PayloadAction<你的接口类型>，这样Redux Toolkit会自动推导Action的payload类型：

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

// 定义slice的状态类型
interface FiltersState {
  currentFilters: FiltersPayload;
}

// 初始状态
const initialState: FiltersState = {
  currentFilters: {},
};

const filtersSlice = createSlice({
  name: 'filters',
  initialState,
  reducers: {
    // 用PayloadAction明确指定payload类型为FiltersPayload
    setFilters: (state, action: PayloadAction<FiltersPayload>) => {
      state.currentFilters = { ...state.currentFilters, ...action.payload };
    },
  },
});

// 导出的action会自动带上正确的payload类型
export const { setFilters } = filtersSlice.actions;
export default filtersSlice.reducer;

3. 效果验证
   现在调用setFilters时，TypeScript会严格检查传入的参数是否符合FiltersPayload的结构：

• 合法调用：setFilters({ keyword: '手机', category: '数码' }) 会正常通过类型检查
• 非法调用：setFilters({ foo: 'hello' }) 会直接抛出类型错误，因为foo不是FiltersPayload中定义的属性

这样就彻底锁定了Action的payload类型，避免传入不符合预期的内容。

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