Comments (3)
The class is being (de)serialized as an object into JSON, which causes it to loose its non-enumerable properties.
If you need to capture additional metadata from the class during serialization, you can implement a custom toJSON
method on the class.
from ngrx-store-localstorage.
@uitgewis Thanks for the clarification!
from ngrx-store-localstorage.
I resolve the issue later yesterday. I needed a deserializer, and passed it in an object with the state/property key.
Here's an example :
custom.state.ts
export class CustomObject {
value: any;
constructor(obj?: any) {
if(obj) {
this.value = obj.value;
}
}
}
/**
* Custom state structure
*/
export class CustomState {
/**
* object you need to deserialize properly to its class (CustomObject)
*/
obj: CustomObject;
/**
* variable you don't need to deserialize
*/
anybasictypevariable: any;
constructor(state?: any) {
if(state) {
this.obj = new CustomObject(state.obj);
this.anybasictypevariable = state.anybasictypevariable;
}
}
/**
* Method to serialize a CustomState to JSON
*/
static serialize(a: CustomState): string {
return JSON.stringify(a);
}
/**
* Method to deserialize a JSON to CustomState
*/
static deserialize(json: any): CustomState {
return new CustomState(json);
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { StoreModule, combineReducers, ActionReducer } from '@ngrx/store';
import { compose } from '@ngrx/core/compose';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { storeFreeze } from 'ngrx-store-freeze';
import { localStorageSync } from 'ngrx-store-localstorage';
import { environment } from 'environments/environment';
import { customReducer } from './custom.reducer';
import { CustomState } from './custom.state';
export interface State {
custom: CustomState;
}
const reducers = {
custom: customReducer
};
/**
* Add the deserializer to the localStorageSync rules
*/
const localStorageRules = {
keys: [
{ custom: { deserialize: CustomState.deserialize } }
],
rehydrate: true
};
const developmentReducer: ActionReducer<State> = compose(storeFreeze, localStorageSync(localStorageRules), combineReducers)(reducers);
const productionReducer: ActionReducer<State> = compose(localStorageSync(localStorageRules), combineReducers)(reducers);
export function reducer(state: any, action: any) {
if (environment.production) {
return productionReducer(state, action);
} else {
return developmentReducer(state, action);
}
}
@NgModule({
imports: [
StoreModule.provideStore(reducer)
],
})
export class AppModule { }
Should we add this to the doc ?
from ngrx-store-localstorage.
Related Issues (20)
- Get different properties by store
- Fix module resolution issue when importing action constants
- Rehydrating Feature Module using ngrx/entity HOT 2
- npm lib missing readme and license HOT 3
- Unable to save state to localStorage: DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'tempState' exceeded the quota. HOT 3
- Persist reducer states under single key HOT 1
- Rehydration callback
- Angular 14 dependency update HOT 5
- Angular 14 deepmerge warning HOT 9
- Angular 15 support HOT 4
- How to exclude subkeys from ngrx-localstorage by angular service?
- Deserialization of JSON object stored as string fails due to date format.
- custom prefix storageKeySerializer based on app state property in feature metaReducer. HOT 2
- Angular 16 support HOT 6
- Upgrade to node v18 HOT 2
- Angular 17 support HOT 5
- What's version of ngrx-store-localstorage is compatible with angular 16? HOT 6
- Remove deepmerge dependecy to avoid optimalization bailouts HOT 1
- Angular 17 Standalone Components HOT 1
- Any chance the synchronization can work both ways?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngrx-store-localstorage.