React/Redux Toolkit中通用Canvas切片的Thunk创建器类型问题

1. 先定义通用类型基础 #

先明确核心类型作为类型标注的锚点，确保所有逻辑的类型一致性：

// 定义Canvas功能类型，限定只能是已有的标签页类型
type CanvasFeature = 'inpainting' | 'outpainting';

// 通用Canvas状态结构，统一两个功能的状态字段
interface CanvasState {
  isLoading: boolean;
  canvasData: string | null;
  error: string | null;
}

// 通用切片配置类型，约束createGenericCanvasSlice的入参格式
interface GenericCanvasSliceConfig {
  name: CanvasFeature;
  initialState: CanvasState;
}

2. 完善通用切片的类型定义 #

为createGenericCanvasSlice添加精确的泛型类型，确保返回的切片包含明确的reducer和action类型：

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

function createGenericCanvasSlice<
  State extends CanvasState,
  Reducers extends SliceCaseReducers<State>
>(config: GenericCanvasSliceConfig & { reducers: Reducers }): Slice<State, Reducers> {
  return createSlice({
    name: config.name,
    initialState: config.initialState,
    reducers: config.reducers,
  });
}

// 实例化两个功能切片，类型会自动推导
const inpaintingSlice = createGenericCanvasSlice({
  name: 'inpainting',
  initialState: { isLoading: false, canvasData: null, error: null },
  reducers: {
    setLoading: (state, action) => { state.isLoading = action.payload; },
    setCanvasData: (state, action) => { state.canvasData = action.payload; },
    setError: (state, action) => { state.error = action.payload; },
  },
});

const outpaintingSlice = createGenericCanvasSlice({
  name: 'outpainting',
  initialState: { isLoading: false, canvasData: null, error: null },
  reducers: {
    setLoading: (state, action) => { state.isLoading = action.payload; },
    setCanvasData: (state, action) => { state.canvasData = action.payload; },
    setError: (state, action) => { state.error = action.payload; },
  },
});

// 用as const固定切片映射的类型，让TS能精确推断每个feature对应的切片
const canvasSlices = {
  inpainting: inpaintingSlice,
  outpainting: outpaintingSlice,
} as const;

3. 为createCanvasThunk添加类型标注 #

明确Thunk的参数、返回值及依赖的RootState类型，确保动态分发action时类型安全：

import { createAsyncThunk, AsyncThunk } from '@reduxjs/toolkit';
import { RootState } from './store'; // 导入你的RootState类型

// 定义Thunk的入参类型，根据实际业务调整
interface CanvasThunkParams {
  imageUrl: string;
  prompt: string;
}

// 定义createCanvasThunk的类型签名
type CanvasThunkCreator = (feature: CanvasFeature) => AsyncThunk<string, CanvasThunkParams, { state: RootState }>;

const createCanvasThunk: CanvasThunkCreator = (feature) => {
  return createAsyncThunk(
    `${feature}/processCanvas`,
    async (params, { dispatch }) => {
      const targetSlice = canvasSlices[feature];
      dispatch(targetSlice.actions.setLoading(true));
      
      try {
        // 替换为实际的API调用逻辑
        const response = await fetch(`/api/${feature}`, {
          method: 'POST',
          body: JSON.stringify(params),
        });
        const data = await response.json();
        
        dispatch(targetSlice.actions.setCanvasData(data.result));
        return data.result;
      } catch (err) {
        const errorMsg = err instanceof Error ? err.message : '未知错误';
        dispatch(targetSlice.actions.setError(errorMsg));
        throw errorMsg;
      } finally {
        dispatch(targetSlice.actions.setLoading(false));
      }
    }
  );
};

4. 为lodash.reduce生成thunks对象添加类型标注 #

通过映射类型定义最终thunks对象的结构，确保reduce过程中类型不丢失：

import _ from 'lodash';

// 定义最终thunks对象的类型结构
type CanvasThunks = {
  [K in CanvasFeature]: ReturnType<typeof createCanvasThunk>;
};

// 生成统一的thunks对象，初始化时显式指定类型避免TS推断宽泛
const canvasThunks: CanvasThunks = _.reduce(
  ['inpainting', 'outpainting'] as CanvasFeature[],
  (acc, feature) => {
    acc[feature] = createCanvasThunk(feature);
    return acc;
  },
  {} as CanvasThunks
);

5. 组件中动态使用的类型安全示例 #

在组件中根据当前标签页动态调用对应thunk，TS会自动校验类型：

import { useDispatch, useSelector } from 'react-redux';
import { RootState } from './store';

function CanvasTabs() {
  const dispatch = useDispatch();
  // 假设你有存储当前激活标签的全局状态
  const currentFeature = useSelector((state: RootState) => state.activeCanvasFeature);
  const canvasState = useSelector((state: RootState) => state[currentFeature]);

  const handleProcess = async (params: CanvasThunkParams) => {
    try {
      await dispatch(canvasThunks[currentFeature](params)).unwrap();
      // 处理成功逻辑
    } catch (err) {
      // 处理错误逻辑
    }
  };

  return (
    // 标签页及Canvas组件渲染逻辑
  );
}

关键类型标注要点 #

• 用CanvasFeature枚举类型限定所有动态逻辑的范围，避免非法值
• 用as const固定切片映射的类型，让TS能精确推导每个feature对应的切片和action
• 定义CanvasThunks映射类型，确保reduce生成的对象结构与功能类型完全匹配
• 在reduce累加器初始化时显式指定类型，避免TS推断出宽泛的{}类型

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