Git Product home page Git Product logo

Comments (3)

ferdis avatar ferdis commented on June 29, 2024 1

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.

btroncone avatar btroncone commented on June 29, 2024

@uitgewis Thanks for the clarification!

from ngrx-store-localstorage.

Murazaki avatar Murazaki commented on June 29, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.