fix: Removed custom store rehydration

README.md

@@ -169,7 +169,7 @@ export class AppComponent {
 
 <a name="examples-demo" />
 
-#### Demo
+#### Demo 👀
 
 - [Stackblitz Ngrx demo](https://stackblitz.com/edit/ngx-remotedata-demo?file=src%2Fapp%2Fmeow%2Freducer.ts)
 
@@ -185,7 +185,7 @@ export class AppComponent {
 
 <a name="examples-ngrx" />
 
-- [Ngrx (includes store rehydration with de/serialization)](src/app/examples/ngrx)
+- [Ngrx](src/app/examples/ngrx) _(includes store rehydration from `localStorage`)_
 
 <a name="api" />
 

package.json

@@ -48,9 +48,10 @@
     "@angular/platform-browser": "~11.1.0",
     "@angular/platform-browser-dynamic": "~11.1.0",
     "@angular/router": "~11.1.0",
-    "@ngrx/effects": "^10.1.2",
-    "@ngrx/store": "^10.1.2",
-    "@ngrx/store-devtools": "^10.1.2",
+    "@ngrx/effects": "^11.0.1",
+    "@ngrx/store": "^11.0.1",
+    "@ngrx/store-devtools": "^11.0.1",
+    "ngrx-store-localstorage": "^11.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
+import { StoreModule, MetaReducer } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
@@ -16,56 +16,8 @@ import { PosComponent } from './examples/pos/pos.component';
 import { PosService } from './examples/pos/pos.service';
 import { MeowEffects } from './examples/ngrx/store/effects';
 import { BasicsComponent } from './examples/basics/basics.component';
-import {
-  notAsked,
-  inProgress,
-  failure,
-  success,
-  RemoteData
-} from 'ngx-remotedata';
-import { localStorageSync } from './examples/ngrx/store/local-store-sync';
+import { localStorageSyncReducer } from './examples/ngrx/store/localstorage-sync';
 
-export function localStorageSyncReducer(
-  reducer: ActionReducer<any>
-): ActionReducer<any> {
-  return localStorageSync({
-    rehydrate: true,
-    storageKey: 'myAppStorage',
-    keys: {
-      meow: {
-        serialize: (rd: RemoteData<any>) => rd,
-        deserialize: (json: {
-          tag: RemoteData<any>['tag'];
-          err: any;
-          val: any;
-        }) => {
-          const rd = [
-            {
-              matcher: (tag: RemoteData<any>['tag']) => tag === 'NotAsked',
-              mapper: () => notAsked()
-            },
-            {
-              matcher: (tag: RemoteData<any>['tag']) => tag === 'InProgress',
-              mapper: () => inProgress(json.val)
-            },
-            {
-              matcher: (tag: RemoteData<any>['tag']) => tag === 'Failure',
-              mapper: () => failure(json.err, json.val)
-            },
-            {
-              matcher: (tag: RemoteData<any>['tag']) => tag === 'Success',
-              mapper: () => success(json.val)
-            }
-          ]
-            .filter(matchMap => matchMap.matcher(json.tag))
-            .map(matchMap => matchMap.mapper())
-            .pop();
-          return rd || notAsked();
-        }
-      }
-    }
-  })(reducer);
-}
 const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];
 
 @NgModule({

src/app/examples/ngrx/store/localstorage-sync.ts

@@ -0,0 +1,11 @@
+import { ActionReducer } from '@ngrx/store';
+import { localStorageSync } from 'ngrx-store-localstorage';
+
+/**
+ * Meta reducer used in app.module.ts to sync reducer keys to/from localStorage
+ */
+export function localStorageSyncReducer(
+  reducer: ActionReducer<any>
+): ActionReducer<any> {
+  return localStorageSync({ rehydrate: true, keys: ['meow'] })(reducer);
+}