reduxjs/[电子邮件受保护]combineSlices 的使用

Question

我不明白如何使用 LazyLoadedSlices 键入 useAppSelector：

我有店

// @shared/redux/store.ts

// comment: https://redux-toolkit.js.org/api/combineSlices
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface LazyLoadedSlices {}

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

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
      .prepend(listenerMiddleware.middleware)
      /* comment: RTKQ method */
      /* eslint-disable unicorn/prefer-spread */
      .concat(baseApi.middleware)
});

// Try to typing RootState
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;

所以，我尝试在我的组件中使用延迟加载切片

// @feature/my-component/store.ts

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

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

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

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

// @feature/my-component/my-component.tsx
export const MyComponent = (): React.JSX.Element => {
  const order = useAppSelector(selectors.selectOrder); // <--- Here got an error

  return (
    // ...
  );
};

我收到错误：

Types of parameters state and state are incompatible.
Type {   baseApi: CombinedState<{}, 'Dashboard' | 'Widget', 'baseApi'>; }
has no properties in common with type {   'feature/filter-dashboard'?: State | undefined; }

所以我很困惑重新声明我的 useAppSeletor 来理解 LazyLoadedSlices

我尝试使用“useSelector”而不是“useAppSelector”，它是有效的。 但我想为我的项目提供类型安全。

Answer 1

您缺少文档的一部分 - 您必须将延迟加载的切片添加到

LazyLoadedSlices

界面。

在您的切片文件中：

declare module '.' /* or the path to wherever your original LazyLoadedSlices  interface is exported*/ {
  export interface LazyLoadedSlices extends WithSlice<typeof slice> {}
}