Как создать Store с composeWithDevTools в Typescript без ошибок типа?

Question

В моем index.tsx я создаю избыточное хранилище

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/