fix(module): fix storage signal issue (#135)

unadlib · Aug 18, 2024 · 2257cbd · 2257cbd
1 parent fb54094
commit 2257cbd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 24 deletions.
diff --git a/examples/ts-bookstore/src/index.tsx b/examples/ts-bookstore/src/index.tsx
@@ -40,6 +40,7 @@ const app = createApp({
   render,
   devOptions: {
     reduxDevTools: true,
+    autoComputed: true,
   },
 });
 

diff --git a/examples/ts-bookstore/src/modules/shoppingCart.service.ts b/examples/ts-bookstore/src/modules/shoppingCart.service.ts
@@ -1,4 +1,4 @@
-import { injectable, action, state } from 'reactant';
+import { injectable, action, state, computed, watch } from 'reactant';
 import { Storage } from 'reactant-storage';
 
 interface IListItem {
@@ -16,6 +16,14 @@ class ShoppingCart {
     this.storage.setStorage(this, {
       whitelist: ['list'],
     });
+
+    watch(
+      this,
+      () => this.bookCount,
+      () => {
+        console.log('bookCount:', this.bookCount);
+      }
+    );
   }
 
   @state
@@ -30,6 +38,11 @@ class ShoppingCart {
       book.count += item.count;
     }
   }
+
+  @computed
+  get bookCount() {
+    return this.list.reduce((acc, item) => acc + item.count, 0);
+  }
 }
 
 export { ShoppingCart };
diff --git a/packages/reactant-module/src/decorators/computed.ts b/packages/reactant-module/src/decorators/computed.ts
@@ -108,7 +108,8 @@ export function computed(...args: any[]) {
     ...descriptor,
     get(this: Service) {
       if (!this[enableAutoComputedKey]) {
-        if (__DEV__) {
+        // if the auto computed feature is disabled, return the computed value directly.
+        if (__DEV__ && this[storeKey]) {
           console.warn(
             `You should enable auto computed feature by setting 'autoComputed' to 'true' in the dev options.`
           );

diff --git a/packages/reactant-storage/src/storage.tsx b/packages/reactant-storage/src/storage.tsx
@@ -15,7 +15,7 @@ import {
   signalMapKey,
   enableAutoComputedKey,
 } from 'reactant-module';
-import type { Reducer, ReducersMapObject, Store } from 'redux';
+import type { Middleware, Reducer, ReducersMapObject, Store } from 'redux';
 import {
   persistStore,
   persistReducer,
@@ -129,6 +129,29 @@ class ReactantStorage extends PluginModule {
     });
   }
 
+  middleware: Middleware = (store) => (next) => (_action) => {
+    if (
+      (this as Service)[enableAutoComputedKey] &&
+      _action.type === REHYDRATE &&
+      _action.key !== 'root'
+    ) {
+      const target = getRef(this).modules![_action.key];
+      const persistStateKeys = Object.keys(_action.payload) ?? [];
+      persistStateKeys.forEach((persistStateKey) => {
+        if (
+          persistStateKey !== '_persist' &&
+          target[signalMapKey]?.[persistStateKey]
+        ) {
+          // need to update the target signal value to the latest hydrated state
+          target[signalMapKey][persistStateKey].value =
+            _action.payload[persistStateKey];
+        }
+      });
+    }
+    const result = next(_action);
+    return result;
+  };
+
   /**
    * get every module rehydrated
    */
@@ -162,27 +185,6 @@ class ReactantStorage extends PluginModule {
       }
       const persistConfig = this.persistConfig[key];
       if (persistConfig) {
-        if ((this as Service)[enableAutoComputedKey]) {
-          const target = getRef(this)!.modules![key];
-          const ref = getRef(target);
-          const stopWatching = watch(
-            this,
-            () => ref!.state?._persist?.rehydrated,
-            (rehydrated) => {
-              if (rehydrated) {
-                stopWatching();
-                const persistStateKeys = persistConfig.whitelist ?? [];
-                persistStateKeys.forEach((persistStateKey) => {
-                  if (target[signalMapKey]?.[persistStateKey]) {
-                    // need to update the target signal value to the latest hydrated state
-                    target[signalMapKey][persistStateKey].value =
-                      ref.state![persistStateKey];
-                  }
-                });
-              }
-            }
-          );
-        }
         const reducer = persistReducer(persistConfig, reducers[key]);
         Object.assign(reducers, {
           [key]: reducer,