如何为LazyLoadedSlices正确类型化useAppSelector？

问题根源 #

你的LazyLoadedSlices是空接口，导致自动生成的RootState类型不包含任何懒加载slice的状态定义。而slice的选择器（比如selectOrder）期望接收包含当前slice状态的RootState，两者类型不匹配，因此报错。

解决方案 #

1. 改造Store中的LazyLoadedSlices接口 #

在@shared/redux/store.ts中，保持LazyLoadedSlices接口的基础定义，允许其他模块后续扩充该接口：

// @shared/redux/store.ts

// 基础空接口，供其他模块扩充
export interface LazyLoadedSlices {}

// Global reducer for redux
export const rootReducer =
  combineSlices(baseApi).withLazyLoadedSlices<LazyLoadedSlices>();

// 其余代码保持不变
export const store = configureStore({ /* ... */ });
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch: () => ThunkDispatch<
  RootState,
  unknown,
  UnknownAction
> = useDispatch;

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

2. 在懒加载Slice文件中扩充LazyLoadedSlices #

在每个懒加载slice的文件（比如@feature/my-component/store.ts）中，导入LazyLoadedSlices并扩充它，把当前slice的名称和状态类型添加进去：

// @feature/my-component/store.ts
import type { LazyLoadedSlices } from '@shared/redux/store';

// 自定义slice名称，必须和createSlice中的name一致
const baseName = 'feature/filter-dashboard';

// 扩充LazyLoadedSlices接口，添加当前slice的状态类型
declare module '@shared/redux/store' {
  interface LazyLoadedSlices {
    [baseName]: State;
  }
}

type State = {
  order: 'asc' | 'desc';
};

const initialState = { order: 'asc' } as State;

const slice = createSlice({
  name: baseName,
  initialState,
  reducers: {
    // ... 你的reducer逻辑
  },
  selectors: {
    selectOrder: (state) => state.order
  }
});

export const { selectors, actions } = slice.injectInto(rootReducer);

3. 组件中正常使用useAppSelector #

此时RootState类型已经自动包含了该懒加载slice的状态定义，useAppSelector可以正确匹配选择器的类型：

// @feature/my-component/my-component.tsx
export const MyComponent = (): React.JSX.Element => {
  // 不再报错，类型完全匹配
  const order = useAppSelector(selectors.selectOrder);

  return (
    // ... 组件内容
  );
};

关键说明 #

• 必须保证slice的name（即baseName）和LazyLoadedSlices接口中的键名完全一致，否则类型无法正确关联。
• 这种方式利用了TypeScript的模块扩充特性，让分散在各个feature中的懒加载slice类型能自动合并到全局的LazyLoadedSlices中，最终让RootState包含所有懒加载slice的状态类型。

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