In Angular2 often the UI does not get refreshed

[born2net]

When using this plugin with ng2, often the UI does update,,,
The underline store gets updated, but I have to manually click on a button to force a change detection for the UI to re-render... it happens about 70% of the time...

regards

Sean

[gaearon]

Does this happen only with the extension, or can you reproduce this with vanilla Redux DevTools too?

[born2net]

Sorry let me explain better... when I disable different store snapshots in the extension, I expect the UI to update, but it doesn't... but if I click on a button to force a change in the store and thus a re-rendering in ng2 via prop bindings, the state of the UI at that point will match my store

[zalmoxisus]

@born2net, if you try to switch from "Autoselect instances" to that instance, does that help? Could you please share an example with Angular? So I would be able to reproduce it and also test when implementing new features? It could be a pull request to our examples or a separate branch.

[born2net]

it didn't help... and sure, here is a small project you can use:
https://github.com/InfomediaLtd/angular2-redux-example
try add something to cart, next time travel and the UI will not change...

The DevTool is already in the project so should be easy to debug...

regards

[zalmoxisus]

Just tried that example, I'm getting all changes instantly even when hovering the users. Did you try that example? Maybe in your case you have something different?

[born2net]

let me explain, yes all changes register fine, but now try and time travel OR try and disable different store items in the DevTool widget's UI, and these changes do not update the UI

[zalmoxisus]

I see, toggling actions has no effect there. Will investigate this tomorrow. Thanks for the report!

[born2net]

let me add that 7 out of 10 times it will not work... BUT once in a while it will ... must be racing condition... and if you manually update the store it will push the onChange in ng2 and WILL update UI with the changes you did manually via DevTools, hope that helps.

[zalmoxisus]

Could you please try it also with vanilla Redux DevTools to see if the problem is related only to the extension?

[born2net]

this will work with ng2? and hot loading as well for ng2?
if so, please provide sample code as all I find is React stuff

[zalmoxisus]

It would've been possible to open it in a new window, which is rendered by React as in the example, but it's not that simple. I'll look into it tomorrow.

[born2net]

got it, tx!

[zalmoxisus]

Hey @born2net,

Yes, it's the same with vanilla Redux DevTools, and actually, as you reported, everything works but the app's UI is updated only when you dispatch an action, even though the data is intact to the lifted state. You should make the UI react to the store.subscribe as the data already does, not to dispatching actions.

If you don't have time to fix the example with angular2-redux, you may use ng2-redux instead, which already has an example with Redux DevTools and should work well.

[born2net]

tx for looking into this, but with Angular2 you can bypass the subscription and bind directly to the store via Getters, as in:

 <ul>
                <BusinessViewItem *ngFor="#business of items" [business]="business">
                </BusinessViewItem>
   </ul>

  get items():List<BusinessModel> {
        return this.appStore.getState().business;
    }

but in any case in that sample I do use:

  appStore.subscribe((state) => {
            self.usersToShow = usersToShowSelector(state);
            self.currentUser = state.users.current;
            self.filmFilter = state.users.filmFilter;

        });

and if I add a breakpoint, any time I use the DevTools time travel it does get to the subscribe method, so like you said, the store model functionality is working, but I am not sure why Angular2 is not re-rendering it, I did remove the onPush change detection but no luck... mmm...

regards

Sean

[rubyboy]

I've updated the angular2-redux-example to create the app store inside a factory (instead of doing that statically before Angular bootstraps) and now it properly updates the UI.
Check out my comment in the other issue you've created: Force a zone refresh on Angular2 when time traveling... #44

[born2net]

Great work Ruby!