diff --git a/PLAYBOOK.md b/PLAYBOOK.md
index fd1752f88..18f20daa5 100644
--- a/PLAYBOOK.md
+++ b/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
 
diff --git a/libs/notifications/src/lib/notifications.state.ts b/libs/notifications/src/lib/notifications.state.ts
index 4b4a7701c..d1e7e7588 100644
--- a/libs/notifications/src/lib/notifications.state.ts
+++ b/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;
+      });
+    });
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 0c3532721..dbcbeb927 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1646,6 +1646,14 @@
         "tslib": "^1.9.0"
       }
     },
+    "@ngxs-labs/immer-adapter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@ngxs-labs/immer-adapter/-/immer-adapter-1.1.1.tgz",
+      "integrity": "sha512-JZbALPrxaoarxIkDBeSDMTbMbzvmWwwXkNnvt10yiZpBi0KkcuQ8fujlT73I4ka55ZrYlf1Z51NBedh2CYqiAw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@ngxs/devtools-plugin": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@ngxs/devtools-plugin/-/devtools-plugin-3.3.4.tgz",
@@ -11902,6 +11910,11 @@
       "dev": true,
       "optional": true
     },
+    "immer": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-1.9.3.tgz",
+      "integrity": "sha512-bUyz3fOHGn82V7h4oVgJGmFglZt53JWwSyVNAT4sO0d7IovHLwLuHbh14uYKY0tewFoDcEdiQW7HuL0NsRVziw=="
+    },
     "immutable": {
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
diff --git a/package.json b/package.json
index 945000174..494e60d94 100644
--- a/package.json
+++ b/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",