extra-react-store 0.1.4 → 0.1.5

package/README.md

@@ -84,6 +84,7 @@ function createStoreContext<State>(): StoreContext<State>
 function useSelector<State, Value>(
   context: StoreContext<State>
 , selector: (state: State) => Value
+, isEqual: (a: Value, b: Value) => boolean = (a, b) => a === b
 ): Value
 ```
 

package/lib/use-selector.d.ts

@@ -1,2 +1,2 @@
 import { StoreContext } from './types.js';
-export declare function useSelector<State, Value>(context: StoreContext<State>, selector: (state: State) => Value): Value;
+export declare function useSelector<State, Value>(context: StoreContext<State>, selector: (state: State) => Value, isEqual?: (a: Value, b: Value) => boolean): Value;

package/lib/use-selector.js

@@ -1,13 +1,15 @@
 import { useState, useContext, useEffect } from 'react';
-export function useSelector(context, selector) {
+export function useSelector(context, selector, isEqual = (a, b) => a === b) {
     const store = useContext(context);
-    const [value, setValue] = useState(() => selector(store.getState()));
+    const [[value], setBox] = useState(() => [selector(store.getState())]);
     useEffect(() => {
         return store.subscribe(state => {
             const newValue = selector(state);
-            setValue(newValue);
+            if (!isEqual(value, newValue)) {
+                setBox([newValue]);
+            }
         });
-    }, [store, selector, value]);
+    }, [store, selector, value, setBox]);
     return value;
 }
 //# sourceMappingURL=use-selector.js.map

package/lib/use-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC;IAEjC,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;YAGhC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE5B,OAAO,KAAK,CAAA;AACd,CAAC"}
+{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC;IAE5D,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;YAEhC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;gBAC7B,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;aACnB;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAEpC,OAAO,KAAK,CAAA;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-store",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
   "keywords": [],
   "files": [
@@ -33,15 +33,15 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.5",
-    "@commitlint/config-conventional": "^17.6.5",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@types/react": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.42.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "extra-react-hooks": "^0.6.3",
     "husky": "4",
@@ -50,13 +50,13 @@
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^4.3.0",
+    "rimraf": "^5.0.1",
     "standard-version": "^9.3.2",
-    "ts-patch": "^2.1.0",
-    "tslib": "^2.5.3",
-    "typescript": "4.9.5",
+    "ts-patch": "^3.0.2",
+    "tslib": "^2.6.0",
+    "typescript": "5.1.6",
     "typescript-transform-paths": "^3.4.6",
-    "vite": "^4.4.3",
+    "vite": "^4.4.5",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.33.0"
   },

package/src/use-selector.ts

@@ -4,18 +4,20 @@ import { StoreContext } from './types.js'
 export function useSelector<State, Value>(
   context: StoreContext<State>
 , selector: (state: State) => Value
+, isEqual: (a: Value, b: Value) => boolean = (a, b) => a === b
 ): Value {
   const store = useContext(context)
-  const [value, setValue] = useState(() => selector(store.getState()))
+  const [[value], setBox] = useState(() => [selector(store.getState())])
 
   useEffect(() => {
     return store.subscribe(state => {
       const newValue = selector(state)
 
-      // 若新旧状态引用相等, 不会发生重新渲染.
-      setValue(newValue)
+      if (!isEqual(value, newValue)) {
+        setBox([newValue])
+      }
     })
-  }, [store, selector, value])
+  }, [store, selector, value, setBox])
 
   return value
 }