如何在 Typescript 中使用 composeWithDevTools createStore 而不會出現類型錯誤？

Question

在我的 index.tsx 中，我創建了 redux 存儲

import { createStore, Store } from 'redux';
...
const store: Store = createStore(reducers, {});

現在我嘗試添加 composeWithDevTools

import { createStore, Store, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
...
const store: Store = createStore(reducers, {}, compose(composeWithDevTools()));

我得到的是錯誤

Type 'Store<CombinedState<{ general: any; }>, StoreAction>' is not assignable to type 'Store<any, AnyAction>'.
  Types of property 'dispatch' are incompatible.
    Type 'Dispatch<StoreAction>' is not assignable to type 'Dispatch<AnyAction>'.
      Type 'AnyAction' is not assignable to type 'StoreAction'.  TS2322

看起來它與我的 StoreAction 類型有某種關系。 在我的減速器中，我遵循

export default (state: GeneralState = initialState, action: StoreAction) => {
...
};

和 StoreAction 是

type StoreAction = {
  type: string;
  payload: any;
};

而且這個 StoreAction type與 AnyAction interface不兼容。 我不明白如何從 TypeScript 的角度正確修復它。

任何想法如何修復錯誤？

Answer 1

看起來您不需要將composeWithDevTools包裝在compose語句中。

從文檔：

  const composedEnhancers = composeWithDevTools(...enhancers)
  const store = createStore(rootReducer, preloadedState, composedEnhancers)

https://redux.js.org/recipes/configuring-your-store/