Redux-devtools-extension: Replayed actions not passed through middleware when using redux-devtools-extension

[Machiaweliczny]

Hello, I'm trying to adopt use of redux-devtools-extension in my project but I've encountered the error from title . Would appreciate some help with the issue if possible.

I'm using Redux DevTools extension 2.11.1

along with:

[email protected]
[email protected]

When I dispatch actions through store.liftedStore.dispatch they aren't going through my redux middlewares stack(defined in my application as middlewares). Obviously when I run actions through store.dispatch everything works correctly.

The same applies when using slider in redux-devtools-extension - my middleware chain doesn't receive replayed actions.

I couldn't find solution on https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md

redux-devtools-extension is the only enhancer that I'm using, but maybe ngRedux applies it wrong?
I'm initializing store this way:

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

You can see how final store is composed under this link:
https://github.com/angular-redux/ng-redux/blob/3.3.0/src/components/ngRedux.js#L16

Maybe it has something to do with https://github.com/reactjs/redux/issues/1051 ? I'm trying to figure it out on my own but would appreciate some help.

[zalmoxisus]

Yes, you're right it's the same problem as discribed in https://github.com/reactjs/redux/issues/1051.

We introduced window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ to solve this problem for Redux, but as ng-redux for some reason separated middlewares from enhancers, it cannot be used there. Basically, it adds another enhancer before all other enhancers and middlewares.

Also we have window.__REDUX_DEVTOOLS_EXTENSION__.updateStore method, which was planned to be removed in 3.0 in favour of the method above. In case you can get the store object after it was enhanced with the middlewares, you can pass it to the extension with

window.__REDUX_DEVTOOLS_EXTENSION__.updateStore(store)

I guess instead of store there should be $ngRedux.

[Machiaweliczny]

@zalmoxisus Thanks for help and fast reply!

I've tested this solution with applying window.__REDUX_DEVTOOLS_EXTENSION__.updateStore($ngRedux)

This seems to fix only "dispatch console":

If I manually type in an action - then it works and is passed through my middlewares.

Unfortunately when I use play button on slider - actions still aren't passed through my middlewares. Any clue why it might be so?

[zalmoxisus]

I'm not quite sure I understand what you want to accomplish. Monitor actions (dispatched by store.liftedStore.dispatch are not transmitted to store.dispatch as they are intended to be handled only by DevTools reducers. Moving back and forth just changes the index from the history of states, so no need to invoke any middlewares or reducers as the result was already "recorded". However if you skip (toggle) an action, the reducers will get recomputed.

[Machiaweliczny]

I'm not quite sure I understand what you want to accomplish.

I was trying to integrate ui-router with redux using https://github.com/neilff/redux-ui-router/blob/master/src/router-middleware.js - this solution is relying on dispatching side effect from middleware to make route changes.

changes the index from the history of states

Thanks - I wasn't sure if you do this or re-dispatch changes

So I have to proxy router structure somehow to my redux store for redux-devtools-extension to work with it(changing routes) instead of relying on side effects from middleware.

Really appreciate you help @zalmoxisus !

[zalmoxisus]

Redux DevTools intentionally doesn't redispatch actions to avoid side effects. So, except that middleware, the router needs something like this. Honestly, I don't like such workarounds, so any suggestions of what we could do from our side, would be welcome.

What you wanted to do is possible by connecting the router to the extension as a separate instance, but that's not an easy solution either, as you'll have to reimplement the monitor actions, and not sure that having it decoupled from your main store is the case.

It seems that there's an open issue there https://github.com/neilff/redux-ui-router/issues/49.

[zalmoxisus]

@Machiaweliczny, what if we'd pass the action to your function whenever a monitor action is invoked:

$ngReduxProvider.createStoreWith(
  rootReducer, 
  middlewares,
  [window.__REDUX_DEVTOOLS_EXTENSION__({
    onMonitorAction: action => { if (action.type === 'CHANGE_LOCATION') changeLocation(action.location); }
  })])

[zalmoxisus]

A simple solution would be to add middleware which would compare if the router state from the store is the same as the current route like it was implemented here.

[Machiaweliczny]

@zalmoxisus Thanks for all the answers.

I think your first idea with onMonitorAction callback is quite nice. This would allow for intentional reimplementation of some side effects without intimate knowledge of 3rd party code as in second case( can use library API instead of syncing data). As far as I understand it's just proposal, right? - https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

[zalmoxisus]

Usually you don't want to redispatch actions for all middlewares as side effects during time travel could lead to unexpected behaviour.

Aside from time travelling, you might want to support importing and skipping actions. Also we'll add the ability to reorder actions and edit the state. All of them invoke recomputing all actions.

As far as I understand it's just proposal, right?

Yes, it's just a proposal, which would require a lot of changes also in redux-devtools-instrument. And yet not sure it would work as expected for the cases above.

Implementing it directly in the middleware like here would be easier, but as mentioned, it could be perf wasting when not using with the extension.