api

packages/r-store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactivity-store",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "author": "MrWangJustToDo",
   "license": "MIT",
   "description": "a reactive store, make you write reactive logic in react app just like zustand",

packages/r-store/src/hook/useReactiveState.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { internalCreateState } from "../state/_internal";
 
@@ -32,6 +32,8 @@ export const useReactiveState = <T extends Record<string, unknown>>(initialState
     [useSelector]
   );
 
+  useEffect(() => () => !(__DEV__) && useSelector.clear(), [useSelector]);
+
   // make the state can be used in the `useReactiveEffect` hook
   // use getReactiveState to make effect can track deps
   return [useSelector.getReactiveState(), setState] as [DeepReadonly<UnwrapNestedRefs<T>>, typeof setState];

packages/r-store/src/shared/controller.ts

@@ -206,11 +206,7 @@ export class Controller<T = any> {
     this._isActive = false;
   }
 
-  inactive() {
-    this._isActive = false;
-  }
-
-  active() {
-    this._isActive = true;
+  setActive(d: boolean) {
+    this._isActive = d;
   }
 }

packages/r-store/src/shared/hook.ts

@@ -6,12 +6,12 @@ import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 
 import { Controller } from "./controller";
-import { delDevController, setDevController, setNamespaceMap } from "./dev";
+import { delDevController, delNamespace, setDevController, setNamespaceMap } from "./dev";
 import { InternalNameSpace, isServer } from "./env";
 import { traverse, traverseShallow } from "./tools";
 
 import type { LifeCycle } from "./lifeCycle";
-import type { DeepReadonly, UnwrapNestedRefs } from "@vue/reactivity";
+import type { DeepReadonly, EffectScope, UnwrapNestedRefs } from "@vue/reactivity";
 
 /**
  * @internal
@@ -173,11 +173,11 @@ export const createHook = <T extends Record<string, unknown>, C extends Record<s
       }
 
       useEffect(() => {
-        ControllerInstance.active();
+        ControllerInstance.setActive(true);
         return () => {
           // fix React strictMode issue
           if (__DEV__) {
-            ControllerInstance.inactive();
+            ControllerInstance.setActive(false);
           } else {
             ControllerInstance.stop();
           }
@@ -223,7 +223,8 @@ export const createHook = <T extends Record<string, unknown>, C extends Record<s
     useDeepStableSelector: typeof useSelector;
     useShallowSelector: typeof useSelector;
     useShallowStableSelector: typeof useSelector;
-    cleanReactiveHooks: () => void;
+    clear: () => void;
+    scope?: EffectScope;
   };
 
   typedUseSelector.getState = () => toRaw(initialState);
@@ -275,13 +276,15 @@ export const createHook = <T extends Record<string, unknown>, C extends Record<s
     };
   };
 
-  typedUseSelector.cleanReactiveHooks = () => {
+  typedUseSelector.getIsActive = () => active;
+
+  typedUseSelector.clear = () => {
     controllerList.forEach((i) => i.stop());
 
+    __DEV__ && !isServer && namespace && delNamespace(namespace);
+
     active = false;
   };
 
-  typedUseSelector.getIsActive = () => active;
-
   return typedUseSelector;
 };

packages/r-store/src/state/createState.ts

@@ -73,6 +73,7 @@ export type UseSelectorWithState<T, C> = {
     (): DeepReadonly<UnwrapNestedRefs<T>> & C;
     <P>(selector: (state: DeepReadonly<UnwrapNestedRefs<T>> & C) => P, compare?: <Q extends P = P>(prev: Q, next: Q) => boolean): P;
   };
+  clear: () => void;
 };
 
 /**

packages/r-store/src/store/_internal.ts

@@ -1,4 +1,4 @@
-import { reactive, toRaw } from "@vue/reactivity";
+import { effectScope, reactive, toRaw } from "@vue/reactivity";
 import { isPromise, isObject } from "@vue/shared";
 
 import { createHook } from "../shared/hook";
@@ -16,7 +16,7 @@ export type Creator<T extends Record<string, unknown>> = () => T;
 /**
  * @internal
  */
-export const internalCreateStore = <T extends Record<string, unknown>>(creator: Creator<T>, name = "createStore", lifeCycle?: LifeCycle) => {
+const _internalCreateStore = <T extends Record<string, unknown>>(creator: Creator<T>, name = "createStore", lifeCycle?: LifeCycle) => {
   const state = creator();
 
   if (__DEV__ && isPromise(state)) {
@@ -56,6 +56,19 @@ export const internalCreateStore = <T extends Record<string, unknown>>(creator:
   return useSelector;
 };
 
+/**
+ * @internal
+ */
+export const internalCreateStore = <T extends Record<string, unknown>>(creator: Creator<T>, name = "createStore", lifeCycle?: LifeCycle) => {
+  const scope = effectScope();
+
+  const useSelector = scope.run(() => _internalCreateStore(creator, name, lifeCycle));
+
+  useSelector.scope = scope;
+
+  return useSelector;
+};
+
 /**
  * @internal
  */

packages/r-store/src/store/createStore.ts

@@ -60,6 +60,7 @@ export type UseSelectorWithStore<T> = {
     (): DeepReadonly<UnwrapNestedRefs<T>>;
     <P>(selector: (state: DeepReadonly<UnwrapNestedRefs<T>>) => P, compare?: <Q extends P = P>(prev: Q, next: Q) => boolean): P;
   };
+  clear: () => void;
 };
 
 /**

packages/r-store/src/store/createStoreWithComponent.ts

@@ -1,4 +1,3 @@
-import { effectScope } from "@vue/reactivity";
 import { useMemo, useEffect, useState } from "react";
 
 import { createLifeCycle } from "../shared/lifeCycle";
@@ -44,18 +43,16 @@ export function createStoreWithComponent<P extends Record<string, unknown>, T ex
   const { setup, render } = props;
 
   const ComponentWithState = (props: P & { children?: CreateStoreWithComponentProps<P, T>["render"] }) => {
-    const { useSelector, scope } = useMemo(() => {
+    const useSelector = useMemo(() => {
       const lifeCycleInstance = createLifeCycle();
 
       setGlobalStoreLifeCycle(lifeCycleInstance);
 
-      const scope = effectScope();
-
-      const useSelector = scope.run(() => internalCreateStore(setup, "createStoreWithComponent", lifeCycleInstance));
+      const useSelector = internalCreateStore(setup, "createStoreWithComponent", lifeCycleInstance);
 
       setGlobalStoreLifeCycle(null);
 
-      return { useSelector, scope };
+      return useSelector;
     }, []);
 
     const [isMount, setIsMount] = useState(false);
@@ -112,7 +109,7 @@ export function createStoreWithComponent<P extends Record<string, unknown>, T ex
       };
     }, [lifeCycleInstance]);
 
-    useEffect(() => scope.stop.bind(scope), []);
+    useEffect(() => () => useSelector.scope?.stop(), [useSelector]);
 
     const renderedChildren = targetRender({ ...last, ...state } as P & DeepReadonly<UnwrapNestedRefs<T>>) || null;