Is it a bad idea to save Date into NgRx store?

Question

I'm creating a full-stack sample with Micro-ORM, NestJS, Angular, and NgRx Data. I want to cover as many as possible functions with NgRx Data.

I have entities that contain Date properties but I had an error when I wanted to create a new entity on the client-side by NgRx data - when I saved data with CompanyDataService.add(company):

ERROR Error: Detected unserializable action at "payload.data.established". https://ngrx.io/guide/store/configuration/runtime-checks#strictactionserializability
at throwIfUnserializable (ngrx-store.js:942:1)
at ngrx-store.js:892:1
at ngrx-store.js:862:1
at ngrx-store.js:284:1
...

CompanyDataService extended from EntityCollectionServiceBase and it dispatches an @ngrx/data/save/add-one action. The problem is that the payload contains Date which is not serializable. This article explains what is the problem here: How to Handle Unserializable Data with NgRx: https://nils-mehlhorn.de/posts/ngrx-store-unserializable-data

Is it really a bad practice to save Date into NgRx store? Even sample projects of NgRx source provides examples where data contains Date: https://github.com/ngrx/platform/blob/master/projects/data-example-app/src/state/story.ts

MODEL:

export interface Story {
  storyId: string;
  order: number;
  column: number;
  title: string;
  description: string;
  createdAt: Date;
  updatedAt: Date;
   }

DATA SERVICE:

@Injectable({
  providedIn: 'root',
})
export class StoryDataService extends EntityCollectionServiceBase<Story> {
  groupedStories$ = this.entities$.pipe(select(selectStories));

  constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
    super('Story', serviceElementsFactory);
  }
}

If it's a bad practice then my problem how can I add data mappers to NgRx Data services - if possible I would avoid changing all properties from Date to timestamp (number) in all layers.

score 0 · Answer 1 · answered Feb 22 '22 at 00:42

My only workaround now:

  StoreModule.forRoot({}, {
    runtimeChecks: {
      strictStateImmutability: true,
      strictActionImmutability: true,
      strictStateSerializability: false,    // otherwise Date cannot be used
      strictActionSerializability: false,   // otherwise Date cannot be used
      strictActionWithinNgZone: true,
      strictActionTypeUniqueness: true,
  }
}),

Does serialization come into scope only if I want to persist NgRx store (e.g. into local storage)? Or is there any other important use-cases?

Is it a bad idea to save Date into NgRx store?

1 Answers1