perf(notifications): using 'immer' to patch ngxs state

PLAYBOOK.md

@@ -161,11 +161,14 @@ npm i angular-in-memory-web-api
 npm i angular-oauth2-oidc
 
 # Add NGXS
-ng add @ngxs/schematics # makesure "defaultCollection" is still  "@nrwl/schematics" in angular.json
+ng add @ngxs/schematics # makesure "defaultCollection" is set back to "@nrwl/schematics" in angular.json
 # or add NGXS manually
 npm i @ngxs/devtools-plugin @ngxs/{store,router-plugin,form-plugin,storage-plugin,devtools-plugin}
 npm i -D @ngxs/schematics
 
+npm i @ngxs-labs/immer-adapter
+npm i immer
+
 # Add formly
 ng add @ngx-formly/schematics --ui-theme=material
 

libs/notifications/src/lib/notifications.state.ts

@@ -1,6 +1,7 @@
 import { Action, NgxsOnInit, Selector, State, StateContext } from '@ngxs/store';
-import { AppNotification } from './app-notification.model';
+import { produce } from '@ngxs-labs/immer-adapter';
 import { tap } from 'rxjs/operators';
+import { AppNotification } from './app-notification.model';
 import { NotificationsService } from './notifications.service';
 import {
   FetchNotifications,
@@ -32,8 +33,10 @@ export class NotificationsState implements NgxsOnInit {
   }
 
   @Action(AddNotification)
-  add({ getState, setState, patchState }: StateContext<AppNotification[]>, { payload }: AddNotification) {
-    setState([...getState(), payload]);
+  add(ctx: StateContext<AppNotification[]>, { payload }: AddNotification) {
+    produce(ctx, (draft: AppNotification[]) => {
+      draft.push(payload);
+    });
   }
 
   @Action(FetchNotifications, { cancelUncompleted: true })
@@ -42,29 +45,27 @@ export class NotificationsState implements NgxsOnInit {
   }
 
   @Action(DeleteNotification)
-  delete({ getState, setState, patchState }: StateContext<AppNotification[]>, { payload }: AddNotification) {
-    setState(getState().filter(note => note !== payload));
+  delete(ctx: StateContext<AppNotification[]>, { payload }: AddNotification) {
+    produce(ctx, draft => {
+      draft.splice(draft.findIndex(note => note.id === payload.id), 1);
+      // or (slower):
+      // return draft.filter(note => note.id !== payload.id);
+    });
   }
 
   @Action(MarkAsRead)
-  markAsRead({ getState, setState, patchState }: StateContext<AppNotification[]>, { payload }: MarkAsRead) {
-    setState(
-      getState().map(notification => {
-        if (notification === payload) {
-          // notification.read = true;
-          return { ...notification, ...{ read: true } };
-        }
-        return notification;
-      }),
-    );
+  markAsRead(ctx: StateContext<AppNotification[]>, { payload }: MarkAsRead) {
+    produce(ctx, draft => {
+      draft[draft.findIndex(note => note.id === payload.id)].read = true;
+    });
   }
 
   @Action(MarkAllAsRead)
-  markAllAsRead({ getState, setState, patchState }: StateContext<AppNotification[]>) {
-    setState(
-      getState().map(notification => {
-        return { ...notification, ...{ read: true } };
-      }),
-    );
+  markAllAsRead(ctx: StateContext<AppNotification[]>) {
+    produce(ctx, draft => {
+      draft.forEach(item => {
+        item.read = true;
+      });
+    });
   }
 }

package.json

@@ -140,6 +140,7 @@
     "@ngx-lite/in-viewport": "^0.1.3",
     "@ngx-lite/input-star-rating": "^0.2.5",
     "@ngx-lite/input-tag": "^0.2.8",
+    "@ngxs-labs/immer-adapter": "^1.1.1",
     "@ngxs/devtools-plugin": "^3.3.0",
     "@ngxs/form-plugin": "^3.3.0",
     "@ngxs/router-plugin": "^3.3.0",
@@ -168,6 +169,7 @@
     "formidable": "^1.2.1",
     "hammerjs": "^2.0.8",
     "helmet": "^3.15.0",
+    "immer": "^1.9.3",
     "intersection-observer": "^0.5.1",
     "nest-router": "^1.0.0",
     "ngx-filepond": "^4.1.0",