Redux-devtools-extension: Force a zone refresh on Angular2 when time traveling...

[born2net]

In reference to closed: https://github.com/zalmoxisus/redux-devtools-extension/issues/43#issuecomment-177165443

so with Angular 2 when using the extension, doing time travel will change the underline store but WILL NOT re-render the view.

The solution:
force zone.run() to push updates on the UI:

 constructor(private appStore:AppStore, private _filmActions:FilmActions, private zone:NgZone) {
        var self = this;
        this.appStore.subscribe((state) => {
            this.zone.run(() => {}); // <!-----------

        });
        this.appStore.dispatch(_filmActions.fetchFilms());
    }

maybe something like this can be added to devtool when in dev mode only, so we can use it with ng2
tx

Sean

[zalmoxisus]

Thanks for the details. I think it would be great to send a pull request to that boilerplate you use, so others will not have to go though this issue.

We could add a onUpdate parameter to the devToolsExtension API, where you may pass that, but:

1. You don't have that class's this when creating the store.
2. Usually you don't want to update only one component on any changes.

So, as I said, better to fix this in the example.

[gaearon]

Is this specific to DevTools in any way? If you subscribe to the store and update the view, the same code should work with DevTools because it calls listeners on changes, just like a normal store update does.

[born2net]

for me I added it to my root app so it auto applies to the entire application (so didnt need per component)

Rendering is part of change detection. To force change detection, here are some options:

ApplicationRef.tick() - similar to Angular 1's $rootScope.$digest() -- i.e., check the full component tree

NgZone.run(callback) - similar to $rootScope.$apply(callback) -- i.e., evaluate the callback function inside the Angular 2 zone. I think, but I'm not sure, that this ends up checking the full component tree after executing the callback function.

ChangeDetectorRef.detectChanges() - similar to $scope.$digest() -- i.e., check only this component
You can inject ApplicationRef, NgZone, or ChangeDetectorRef into your component.

and as far as ng2, it is missing the updates from the DevTool ( I suspect racing condition between the DevTool change and ng2 invalidation of UI), so we must handle ng2 differently, i.e.: onUpdate in DevTool and force refresh AFTER store has been applied would be one solution, maybe through a single change tick (setTimeout(()=>zone.run()),1)

[born2net]

Here is final code:

constructor(private applicationRef:ApplicationRef) {
 this.appStore.subscribe((state) => {
            applicationRef.tick();          
        });
        ...

this will fix the time travel devtool rendering issue in ng2

[rubyboy]

I don't think this is a devTools nor Redux problem. The problem is the bootstrapping of the dev tools. It should be inside the Angular2 zone.

When Angular2 bootstraps it creates a new zone, thus anything that runs afterwards is a child zone. This way Angular can update the UI whenever anything happens within these child zones. That means any code that updates UI needs to run inside these zones. The problem highlighted above relates to the dev tools being created before Angular bootstraps and runs in a separate zone (not a child zone). That's why these changes are not applied.

I think the appropriate approach here is to create the app store (and dev tools enhancer) at a later stage, after creation of the Angular zone. This can be done by using a factory to create the app store (instead of statically doing that before bootstrapping Angular).

Here's an update to the angular2-redux-example that puts the creation of the app store in a factory. Everything else is the same and now dev tool changes are applied properly:
Create AppStore using factory, to delay creation to be inside the Angular zone:

What do you think? Is this a reasonable approach?

I'd like to take this opportunity to thank both @zalmoxisus and @gaearon for the awesome Redux and the dev tools extension :)

Cheers,
Ruby

[zalmoxisus]

Hey @rubyboy,

I don't know much about Angular 2, but it works as intended now. Thanks for the fixes and the feedback!

[born2net]

Great job on finding the fix Ruby, issue closed!!!!!

[SeriousM]

Hey @rubyboy, thank you for fixing this issue.
@zalmoxisus, would you please update the README.md so that other angular2 user see this solution? I can do that as well, should I send you a PR for that?

[zalmoxisus]

@SeriousM, the issue was with that boilerplate, but, yes, a PR to add the link to it would be welcome, so we'll have an example of using the extension with Angular 2.