Akita: Excluding store property from persisting

[micobarac]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

export interface FormState {
  isSubmitting: boolean;
  isEditing: boolean;
  isChecking: boolean;
  isOk: boolean;
  isFullScreen: boolean;
  isReverting: boolean;
}

persistState({ 
  include: ['form'] 
});

Expected behavior

It would be nice to have an option to exclude a certain store property, like this:

persistState({ 
  exclude: ['form.isReverting'] 
});

What is the motivation / use case for changing the behavior?

This would be very handy in case of large number of stores and stores with large number of properties. I know that there are the custom hooks, but they don't seem to be very elegant in solving this case. You must keep store in sync with custom hook, which can lead to bugs.

Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.1
Node: 13.8.0
OS: darwin x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@angular/flex-layout              9.0.0-beta.29
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[NetanelBasal]

We expose custom hooks so that you'll have complete control. https://netbasal.gitbook.io/akita/enhancers/persist-state#custom-hooks

[micobarac]

Thanks @NetanelBasal . As I mentioned in my post, I know about the hooks. In my project I have at least 10 stores, some of them are pretty huge. Writing hooks can be tedious and not elegant.

This is just a feature request.

[micobarac]

Nevertheless, persistState as an awesome plugin :).

[dishanrajapaksha]

It would be useful if we can select the entity properties to persist in local storage in entity stores too.

@NetanelBasal Can we do this already using custom hooks? I only saw an example for a normal store.

[NetanelBasal]

@dishanrajapaksha, you're welcome to submit a PR.

[NetanelBasal]

@dishanrajapaksha, Yes. You can use custom hooks to save only the properties you need.

[theorlovsky]

It might look like this:

persistState({ 
  include: [
    'form',
    {
      state: 'anotherForm',
      keys: ['someKey', 'anotherKey'],
    },
    {
      state: 'oneMoreForm',
      excludeKeys: ['badKey']
    },
  ], 
});

Or this:

persistState({ 
  include: ['form'],
  exclude: [
    {
      state: 'form',
      keys: ['badKey'],
    },
  ],
});

While 'form.isReverting' is good for handling one key, with an object you can pass multiple keys. I'm not sure which option is better, we don't have such use cases in our projects. So feel free to suggest a better option and/or property names.

[NetanelBasal]

The most elegant and typed way is to pass a callback:

function todosStorePersist(state: TodosState) => ({
  // return what you want here
})

todosStorePersist.storeName = 'todos';

persistState({ 
  include: [todosStorePersist],
});

[theorlovsky]

@NetanelBasal Want me to try and open a PR?

[NetanelBasal]

Sure. But I don't think it can be under the include key as it already takes a callback function:

persistState({ 
  include: [storeName => storeName.startWith('someName')],
});

We can add a new config key for this feature.

[theorlovsky]

I always struggle when it comes to choosing a name 😬
Maybe select?

[NetanelBasal]

LGTM