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

Created on 8 Sep 2016 · 4Comments · Source: reduxjs/redux

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

Source

tamird

Most helpful comment

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>.

aikoven on 8 Sep 2016

👍6

All 4 comments

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>.

aikoven on 8 Sep 2016

👍6

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

tamird on 8 Sep 2016

For future reference, this made the trick for me https://github.com/gaearon/redux-thunk/issues/51#issuecomment-259231271

TLDR:

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

franleplant on 9 Nov 2016

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.