4.0.x doesn't support Redux DevTools Chrome Extension

[hangzho]

Redux DevTools Chrome Extension doesn't work after I upgrade the ng-redux to 4.0.x.
The console shows Error: Actions must be plain objects. Use custom middleware for async actions. even though I've already used the thunk middleware like this

$ngReduxProvider.createStoreWith(rootReducer, [thunk], [window.__REDUX_DEVTOOLS_EXTENSION__()]);

The ng-redux library works well if I remove the storeEnhancer [window.__REDUX_DEVTOOLS_EXTENSION__()].

I can reproduce the issue in the example project(https://github.com/johanzhou8/ng-redux/tree/master/examples/async-immutable) too.
Steps to reproduce the issue:

1. download the example project
2. install the dependencies. npm install
3. upgrade the ng-redux. npm i ng-redux@4.0.3
4. use the redux devtool storeEnhancer in the index.js file. $ngReduxProvider.createStoreWith(rootReducer, [thunk], [window.__REDUX_DEVTOOLS_EXTENSION__()]);
5. start the server. npm start
6. look at the error message in the console

The workaround for me is downgrading to the older version. npm i ng-redux@3.5.2.
Thanks.

[GuyPie]

This happens to me as well, except in my case I wasn't seeing any error, just that redux-observable actions weren't working when the devtools were included. Also, I noticed redux-immutable-state-invariant complained about how my reducer was mutating my state even though it was not, this is also not happening in version 3.5.2

[bjohnso5]

I get this same error with 4.0.x and redux-thunk. 3.5.2 works as expected.
Edit: strange behaviour with 4.0.x and redux-observable epics as well.

[AntJanus]

Has anyone been able to figure out where the issue happens in ng-redux?

The 4.0.X release had that whole provideStore feature. I wonder if that's causing it. I'm one of the maintainers but I barely have time. If any of you can contribute with a PR or further debugging info, that'd be immensely helpful in speeding up bugfixing.

[bjohnso5]

When invoking a redux-thunk action, I get the following stack trace:

Error: Actions must be plain objects. Use custom middleware for async actions.
    at Object.performAction (<anonymous>:1:40841)
    at liftAction (<anonymous>:1:34377)
    at dispatch (<anonymous>:1:38408)
    at e.changeGreeting (bindActionCreators.js:3)

You can attempt to repro by cloning this: https://github.com/bjohnso5/angularjs-redux-example/tree/feature/ng-redux-4-bug-report and npm run start:dev or yarn start:dev and browsing to http://localhost:8080/

[AntJanus]

Shit, I just realized what it is. Alright, I'd love some suggestions here.

@bjohnso5 the reason for the issue is the new provideStore mechanism. It wraps the provided store and subscribes to it to push changes from the AngularJS store to the provided store. This means that passing functions will cause an error.

Hmmm...

@derrickpelletier you worked a little bit on the provided store feature, do you have any ideas about how to resolve this?

[derrickpelletier]

Hiding the contents of this comment because they were misleading, see below.

Details

Ah, i'll try to dig into this a bit later today or this weekend (away for holidays).

My gut is that the issue comes from the fact that both stores need awareness of the same middleware, and this isn't reflected in the docs right now...

For example, here's how i'm using this in production and I have both dev tools, logger, and thunk working (and a working branch of sagas).

const logger = createLogger({
  level: 'info',
  collapsed: true
})
const middleware = [reduxThunk, logger]

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancers = composeEnhancers(applyMiddleware(...middleware))
const store = createStore(reducers, enhancers)

angular
  // other stuff...
  .config(($ngReduxProvider) => {
    $ngReduxProvider.provideStore(store, [reduxThunk])
  })

So in this case, the ng-redux store is thunk compatible for the purpose of passing actions up to the true store, but the logger and dev tools only exist on the true store.

---

I'll try to make a PR to the readme to document the problem here

[derrickpelletier]

@AntJanus My previous comment is still a relevant problem, but not the issue being discussed here.

I was digging through some commits tonight to see where this was introduced. From what I can tell, this PR introduced the bug way back in september: #166

The reason the bug never appeared until now is because ng-redux was never published to npm after the 3.5.2 release so this change didn't propagate until it ended up in 4.x.

[NadiykaS]

I have the same problem. Shall i use 3.5.2 version in order to get it fixed?

[derrickpelletier]

@NadiykaS, yeah unfortunately. 4.x only introduces the provideStore functionality, so i don't think you'll miss out on too much.

[ProdigySim]

Why does the provideStore functionality have to copy the store? If it's just to add in middleware, could we use a dynamic-middleware pattern to allow ng-redux middleware to be added to the store after its creation?

[villesau]

Try this approach which allows you to create the whole store in a callback: #218 I made it for different purpose but might give you enough control to sort out also this problem.