Hook up DevTools using createStore

[Olgagr]

This is a...

• [ ] feature request
• [ ] bug report
• [x ] usage question

What toolchain are you using for transpilation/bundling?

• [ ] @angular/cli
• [ x] Custom @ngTools/webpack
• [ ] Raw ngc
• [ ] SystemJS
• [ ] Rollup
• [ ] Other

Environment

NodeJS Version: 6.9.5 Typescript Version: 2.4.1 Angular Version: 4.3.1 @angular-redux/store version: 6.5.7 @angular/cli version: (if applicable) OS:

Actual Behaviour:

Is there any way to hook up devTools when using createStore? I'd like to provide my store and I'm using createStore in application module. However, when I try to pass enhancers as a second argument to the method, Typescript is complaining.

let enhancers = [];
if (ENV === 'development' && this.devTools.isEnabled()) {
  enhancers = [...enhancers, this.devTools.enhancer()];
}

export const store: Store<IAppStore> = createStore(rootReducer, enhancers);
//Argument of type 'any[]' is not assignable to parameter of type 'IAppStore'.
//  Property 'user' is missing in type 'any[]'.

I found an example with configureStore on the repo. However I wonder is it possible to configure devTools this way.

[JPeer264]

Yes, I am using the redux-devtools-extension. And I set it up like this:

import { createStore, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

export const configureStore = (rootReducer) => {
  const middleware = [];
  const enhancers = [];

  enhancers.push(applyMiddleware(...middleware));

  const store = createStore(rootReducer, composeWithDevTools(...enhancers));

  return store;
};

[e-schultz]

@JPeer264 are you trying to provide an already configured store to the app? I usually use the ngRedux.configureStore(rootReducer, initialState middleware, enhancers)

If you are trying to use createStore directly from redux - what version/typings do you have installed?

the signature for createStore in the newer versions is:

export interface StoreCreator {
  <S>(reducer: Reducer<S>, enhancer?: StoreEnhancer<S>): Store<S>;
  <S>(reducer: Reducer<S>, preloadedState: S, enhancer?: StoreEnhancer<S>): Store<S>;
}

seems like it's expecting your composeWithDevTools to be an 'initial state' - not an array of enhancers.