State not always resetting keys persisted on local storage

[hugonoro]

Describe the bug This one is a tricky one. Wasn't sure if it's an actual bug or more of a feature request. I've been setting up your plugin and I'm trying to implement a very simple and standard scenario: on logout, reset all states. I'm doing this by dispatching a new action with StateResetAll.

Although sometimes it works, many other times it doesn't reset the keys persisted in the local storage. Even in these scenarios it does reset all the remaining keys.

Example scenario:

AuthState: { token, refreshToken, isLoading, currentUser }

When the reset all states action is dispatched all the application states are reset and the properties isLoading and currentUser are also reset (these two are not in the local storage). The token and refreshToken elements of the auth state do get reset a few times but most of the times they don't. Which in this particular case is actually a pain because it keeps the tokens active.

To Reproduce Steps to reproduce the behavior:

I've been verifying this behaviour most of the times after doing a reload of the page and trying to do a logout. I tested a few login/ logout sequences and the behaviour is OK for a few times. After a few times it breaks. Or. to test it quicker, whenever I do a full refresh of the page after those properties (token refreshToken) are set, they will not be reset.

Expected behavior I was kind of hoping the expected behaviour was to reset all states, independently of the additional plugins in place

Screenshots

Desktop (please complete the following information):

• Windows 10
• Chrome with devtools redux extension
• Latest version

Additional context The local storage management is handled by the ngxs local storage plugin

[armanozak]

Hi @hugonoro,

Since it does not know anything about the actual states, StateResetAll resets the states based on InitState action dispatched by NGXS at init. If you are persisting states with @ngxs/storage-plugin and want them to get reset as well, you need to reset those persisted states with StateReset instead. Otherwise, next time the app starts, the storage plugin will put them in the store before InitState and StateResetAll will reset to initial states from storage and not to the original defaults of those states.

Check out the playground displaying this behavior. You will see that, when the page is refreshed before a reset to 0, StateResetAll no longer resets to 0, but to the persisted count. StateReset, on the other hand, always resets to 0.

This has been added to the docs.

Thank you for your contribution. I hope this has been helpful to you. I am closing the issue, but if you believe there is any way to change this, feel free to send a PR and reopen it.

Cheers.

[hugonoro]

@armanozak many thanks for picking this up. I do understand the explanation and it does make sense. That's also why I started this ticket saying I wasn't sure if it was a bug or not :).

I was about to try the approach you provided in the playground but for some reason after an upgrade I did to Angular 9.1 all of a sudden none of the resets seem to be working at all :( . I can see them in the devtools, the actions are indeed dispatched but no changes at all in the state in the store. For any of the states. Don't know what's going on because the version in the playground is also 9.1. Don't know if it's the typescript version (mine is 3.7.5) or any other version causing issues. There are no errors, but nothing changes.

Anyway, thank you again for replying and keep up the great work :). This is definitely a great tool.

[armanozak]

Hi @hugonoro,

Thanks. :) v1.2 did not have Ivy support. v1.3 is published yesterday and it does support Ivy. I have also updated the playground to use Ivy.

Have a nice day.