storage: undefined if using key option

[ufoscout]

Versions

* ngxs: 3.1.3
* ngxs/storage-plugin: 3.1.3
* @angular/core: 6.0.3

Repro steps

Initialize the storage plugin with a custom key:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgxsModule.forRoot([]),
    NgxsStoragePluginModule.forRoot({
      key: '@@MY_KEY'
    }),
    NgxsLoggerPluginModule.forRoot(),
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Observed behavior

If the "key" option is passed to the storage plugin, then the value associated with that key in the local storage is undefined.
On the contrary, if the key is not specified, the default one (i.e. @@State) is used and everything works as expected.

Desired behavior

The custom key is used instead of @@State and everything works the same.

[amcdnl]

Can you make a demo? I've using this quite a bit and haven't had any issues.

[hxhieu]

I encountered the same issue and here is what it means - the default @@State works but not custom key

[vdiaz1130]

Any updates on this? Looking to use this feature upon app initialization.

[ph1p]

I tried to solve this issue and I think the whole implementation how the key option works is weird.
You can use strings and arrays. If one of these elements matches an property inside your state, it is set. If not it is undefined. I stopped to try things, because of the migration implementation. I'm new to this library and the migration structure also need keys.

I'm also wondered, that the @@STATE is hard coded, because there is line:

storage.plugin.ts

const isMaster = key === '@@STATE';

and I thought, that the setted key option is your new "master".

---

pseudo-state:

{
  state1: {
    count: 1
  },
  state2: {
    count: 2
  }
}

Implementation:

//...
NgxsStoragePluginModule.forRoot({
    key: 'myState' // is set to undefined
})
//...

Implementation 2:

//...
NgxsStoragePluginModule.forRoot({
    key: 'state1' // is set { count: 1 }
})
//...

Implementation 3:

//...
NgxsStoragePluginModule.forRoot({
    key: ['myState'] // saves nothing
})
//...

Implementation 4:

//...
NgxsStoragePluginModule.forRoot({
    key: ['myState', 'state1'] // saves value of state1 to key "state1" and set "myState" to undefined
})
//...

[camillematters]

Any update on that ? I am facing the same issue :
My need is to change the key user for the local storage (from @@STATE to app_state), but when I use

NgxsStoragePluginModule.forRoot({ key: 'app_state' }),

then the key app_state in my local storage is undefined, and of course the key @@STATE doesn't exist anymore.

[camillematters]

Here is a slackblitz to reproduce :
https://stackblitz.com/edit/angular-hmubmi?file=src%2Fapp%2Fapp.module.ts

You can see in the localstorage that app_state is undefined.
If you remove the key for the storage in the file app.module.ts, then the @@State is defined and full.

[thinkingmedia]

Key is actually the "read" path into the storage object for values to be persisted to localStorage.

With the except of @@STATE which tells the plugin to store all of the state object.

My need is to change the key user for the local storage (from @@State to app_state), but when I use

You must have a property in your state model named app_state.

interface Example { app_state: string };

@State<Example>({
     name: "app",
     defaults: { app_state: "Hello World" }
) //......

The above will store app_state: "Hello World" in localStorage if you set the key option to "app_state".

[arturovt]

@ufoscout should it be closed? The above answer of the thinkingmedia is correct:

Key is actually the "read" path into the storage object for values to be persisted to localStorage.

[ufoscout]

@arturovt
Honestly, I find the behaviour quite weird and confusing; anyway, if this is the intended behaviour, then this issue should be closed.
Please be sure that this is properly documented anyway.

[arturovt]

@ufoscout OK, I will made a PR to enhance docs

[markwhitfeld]

Docs PR has been merged. Closing this issue.