🚀[FEATURE]: storage-plugin Exclude keys from storage

[DevinHolland]

Relevant Package

This feature request is for @ngxs/storage-plugin

Description

It'd be great if there was an option to exclude keys from persistent storage (instead of the current "include these keys" option that exists today).

Describe the problem you are trying to solve

In my application, most states should be stored in persistent storage. There are only a few that should be excluded. With the current functionality, if I had 10 states, where 9 of them should be put in localStorage, and 1 should not, I would have to list out the 9 in the "key" option. As more states are added, this list becomes very large.

In addition, I'd rather my team not have to think about which states should be included, but rather just be included by default, and only exclude when necessary. This would help reduce the cognitive load when adding new features.

Describe the solution you'd like

Something like this maybe?:

NgxsStoragePluginModule.forRoot({
  exclude: [AppleState, BananaState]
})

(supporting the same types as the "key" option)

[splincode]

In my application, most states should be stored in persistent storage. There are only a few that should be excluded. With the current functionality, if I had 10 states, where 9 of them should be put in localStorage, and 1 should not, I would have to list out the 9 in the "key" option. As more states are added, this list becomes very large.

@DevinHolland #896 it would be better

import { PersistenceState } from '@ngxs/storage-plugin';

@State({
    name: 'filter',
    defaults: new Filter()
})
@PersistenceState()
export class FilterState {
 // ..
}

You can leave your comments in issue

[isc30]

any updates on this?

[markwhitfeld]

Reading through the above issue, I don't think it had been addressed. Reopening.
It may be possible to implement some sort of blocklist/safelist approach using the serialisation added here: https://github.com/ngxs/store/pull/1513/files
Maybe @davidmorissette has some thoughts?

[isc30]

I tried multiple approaches to "exclude" some values before storing but they weren't reliable due to HMR and other angular internals, including custom serialization/deserialization.

I did successfully manage to run an action during initialization (APP_INITIALIZER) that removes those keys, each store can act to it and remove the data that shouldn't be stored in the first place.

This last solution works well in all scenarios I tested except for lazy loaded stores

[davidmorissette]

I don't think using the serialization/deserialization interceptors are a good fit in this situation. The requirement is to exclude some states from the persistent storage, while the interceptors will "act" on persisted states. My first thought about this is to mix NgxsStoragePluginModule.forRoot() with a new type of decorator @ExcludePersistenceState() that would be applied directly on the state declaration.

[isc30]

it would be ideal to be able to exclude only certain parts of the store too (per-store beforeStore(obj: any) => any function?)

[BenjaminVettori]

While it would be nice to have a dedicated feature, here is how i excluded for example the states of the actions-executing plugin, to avoid incorrect executing states when the store is restored by ngxs-store.

beforeSerialize: (obj, key) => {        
        if (!obj) {
          return obj;
        }

        // do not store ngxs actions executing states, because this causes issues on page refresh
        if (obj['ngxs_actions_executing']) {
          obj = {
            ...obj,
            ngxs_actions_executing: undefined
          };
        }
        if (obj['ngxs_actions_executed']) {
          obj = {
            ...obj,
            ngxs_actions_executed: undefined
          };
        }

        return obj;
}

It would however be nice if it were possible to exclude certain states from the store in a typesafe way.