typescript: unclear how to appease `compose`'s typings when using redux dev tools

[tamird]

Prior to #1868 it was possible to use https://github.com/zalmoxisus/redux-devtools-extension as we do in CRDB: https://github.com/cockroachdb/cockroach/blob/develop/ui/app/redux/state.ts#L27:L51

After #1868, this produces the following error:

TypeScript [Error] file:///Users/tamird/src/go/src/github.com/cockroachdb/cockroach/ui/app/redux/state.ts:36:3
TypeScript [Error] Type 'Func0<{}, StoreEnhancerStoreCreator<{}>>' cannot be converted to type 'StoreEnhancer<AdminUIState>'.
  Type 'StoreEnhancerStoreCreator<{}>' is not comparable to type 'StoreEnhancerStoreCreator<AdminUIState>'.
    Type 'Store<{}>' is not comparable to type 'Store<AdminUIState>'.
      Type '{}' is not comparable to type 'AdminUIState'.
        Property 'routing' is missing in type '{}'. (TS2352)

I'm not really sure if this is a bug in the typings or if we're doing something wrong in our code, but any help would surely be appreciated.

/cc @aikoven

[aikoven]

Here's how I do it:

import {createStore, applyMiddleware, compose, GenericStoreEnhancer} from 'redux';

const devToolsExtension: GenericStoreEnhancer = window['devToolsExtension'] ?
  window['devToolsExtension']() : f => f;

const store = createStore(rootReducer,
  compose(
    applyMiddleware(sagaMiddleware),
    devToolsExtension
  ) as GenericStoreEnhancer
);

Assuming that rootReducer is typed as Reducer<MyState>, store gets type Store<MyState>.

[tamird]

Yep, replacing StoreEnhancer<AdminUIState> with GenericStoreEnhancer did it. Thanks!

[franleplant]

For future reference, this made the trick for me reduxjs/redux-thunk#51 (comment)

TLDR:

Do not use compose and use only applyMiddleware, it does the trick in newer versions of Redux

[sjdweb]

Hi - struggled with this for a while... Found the easiest way for me was to install redux-devtools-extension (which has built-in typings) and use it like so:

import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

This replaced my use of compose().

This was taken from redux devtools docs.