update

MrWangJustToDo · Nov 18, 2024 · 2e3ba0b · 2e3ba0b
1 parent e0d1b8a
commit 2e3ba0b
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 8 deletions.
diff --git a/packages/r-store/package.json b/packages/r-store/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactivity-store",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "author": "MrWangJustToDo",
   "license": "MIT",
   "description": "a reactive store, make you write reactive logic in react app just like zustand",

diff --git a/packages/r-store/src/shared/controller.ts b/packages/r-store/src/shared/controller.ts
@@ -54,6 +54,8 @@ export class Controller<T = any> {
 
   _effect: ReactiveEffect<T>;
 
+  _state: T;
+
   _devState: any;
 
   _devSelector: any;
@@ -133,10 +135,16 @@ export class Controller<T = any> {
   };
 
   _scheduler = () => {
-    this.run();
+    const newState = this.run();
 
     if (!this._isActive) return;
 
+    const triggerUpdate = this._lifeCycle.triggerUpdateOnlyChanged ? !Object.is(newState, this._state) : true;
+
+    if (!triggerUpdate) return;
+
+    this._state = newState;
+
     if (this._lifeCycle.canUpdateComponent) {
       if (this._lifeCycle.syncUpdateComponent) {
         this.notify();
@@ -170,7 +178,7 @@ export class Controller<T = any> {
 
   // TODO move into constructor function?
   run() {
-    this._effect.run();
+    return this._effect.run();
   }
 
   stop() {

diff --git a/packages/r-store/src/shared/hook.ts b/packages/r-store/src/shared/hook.ts
@@ -99,7 +99,7 @@ export const createHook = <T extends Record<string, unknown>, C extends Record<s
 
     const currentIsStable = type === "default" ? stableSelector : type === "deep-stable" || type === "shallow-stable";
 
-    return (selector?: (state: DeepReadonly<UnwrapNestedRefs<T>> & C) => P) => {
+    function useReactiveHookWithSelector (selector?: (state: DeepReadonly<UnwrapNestedRefs<T>> & C) => P) {
       const ref = useRef<P | DeepReadonly<UnwrapNestedRefs<T>>>();
 
       const selectorRef = useSubscribeCallbackRef(selector, currentIsDeep);
@@ -174,6 +174,8 @@ export const createHook = <T extends Record<string, unknown>, C extends Record<s
 
       return ref.current;
     };
+
+    return useReactiveHookWithSelector;
   };
 
   const defaultHook = generateUseHook("default");

diff --git a/packages/r-store/src/shared/lifeCycle.ts b/packages/r-store/src/shared/lifeCycle.ts
@@ -21,6 +21,8 @@ export type LifeCycle = {
 
   // TODO!
   syncUpdateComponent: boolean;
+
+  triggerUpdateOnlyChanged: boolean;
 }
 
 /**
@@ -36,4 +38,5 @@ export const createLifeCycle = (): LifeCycle => ({
   hasHookInstall: false,
   canUpdateComponent: true,
   syncUpdateComponent: false,
+  triggerUpdateOnlyChanged: false,
 });
diff --git a/packages/r-store/src/state/_internal.ts b/packages/r-store/src/state/_internal.ts
@@ -103,6 +103,10 @@ export function internalCreateState<T extends Record<string, unknown>, P extends
 
   const stableSelector = selectorOptions?.stableSelector ?? false;
 
+  const triggerUpdateOnlyChanged = selectorOptions?.triggerUpdateOnlyChanged ?? false;
+
+  lifeCycle.triggerUpdateOnlyChanged = triggerUpdateOnlyChanged;
+
   if (__DEV__ && reduxDevTool) {
     actions = connectDevTool(namespaceOptions.namespace, actions, rawState, reactiveState, namespaceOptions) as P;
   }

diff --git a/packages/r-store/src/state/tools.ts b/packages/r-store/src/state/tools.ts
@@ -79,6 +79,11 @@ export type WithNamespaceProps<T> = {
 export type WithSelectorOptionsProps = {
   deepSelector?: boolean;
   stableSelector?: boolean;
+  /**
+   * state what return from the selector will be used to compare with the previous state, if the state is equal, the component will not update
+   * @default false
+   */
+  triggerUpdateOnlyChanged?: boolean;
 };
 
 /**
@@ -134,18 +139,18 @@ export const getFinalActions = <T extends Record<string, unknown>, P extends Rec
  */
 export const getFinalNamespace = <T extends Record<string, unknown>, P extends Record<string, Function>>(state: MaybeStateWithMiddleware<T, P>) => {
   if (state["$$__state__$$"])
-    return (state["$$__namespace__$$"] || {}) as { namespace?: string; reduxDevTool?: boolean; listener?: (state: any) => any; shallow?: boolean };
+    return (state["$$__namespace__$$"] || {}) as WithNamespaceProps<T>;
 
-  return {} as { namespace?: string; reduxDevTool?: boolean; listener?: (state: any) => any; shallow?: boolean };
+  return {} as WithNamespaceProps<T>;
 };
 
 /**
  * @internal
  */
 export const getFinalSelectorOptions = <T extends Record<string, unknown>, P extends Record<string, Function>>(state: MaybeStateWithMiddleware<T, P>) => {
-  if (state["$$__state__$$"]) return (state["$$__selectorOptions__$$"] || {}) as { deepSelector?: boolean; stableSelector?: boolean };
+  if (state["$$__state__$$"]) return (state["$$__selectorOptions__$$"] || {}) as WithSelectorOptionsProps;
 
-  return {} as { deepSelector?: boolean; stableSelector?: boolean };
+  return {} as WithSelectorOptionsProps;
 };
 
 // function for help to build external middleware