extra-react-store 0.1.4 → 0.1.6

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 = isReferenceEqual
 ): Value
 ```
 

package/lib/use-partial-updater.js

@@ -1,6 +1,7 @@
 import { useCallback, useContext } from 'react';
 import { produce } from 'immer';
-import { go, isFunction } from '@blackglory/prelude';
+import { go } from '@blackglory/prelude';
+import { isFunction } from 'extra-utils';
 export function usePartialUpdater(context, extractPartialState, mergePartialState) {
     const store = useContext(context);
     const updater = useCallback(newPartialStateOrFn => {

package/lib/use-partial-updater.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-partial-updater.js","sourceRoot":"","sources":["../src/use-partial-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAS,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAGpD,MAAM,UAAU,iBAAiB,CAC/B,OAA4B,EAC5B,mBAAmD,EACnD,iBAAsE;IAEtE,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,OAAO,GAA0B,WAAW,CAAC,mBAAmB,CAAC,EAAE;QACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;QAEjC,MAAM,eAAe,GAAiB,EAAE,CAAC,GAAG,EAAE;YAC5C,IAAI,UAAU,CAAC,mBAAmB,CAAC,EAAE;gBACnC,MAAM,EAAE,GAAG,mBAAmB,CAAA;gBAC9B,MAAM,eAAe,GAAG,OAAO,CAC7B,mBAAmB,CAAC,QAAQ,CAAC,EAE7B,EAAE,CACH,CAAA;gBACD,OAAO,eAAe,CAAA;aACvB;iBAAM;gBACL,MAAM,eAAe,GAAG,mBAAmB,CAAA;gBAC3C,OAAO,eAAe,CAAA;aACvB;QACH,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEnD,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"use-partial-updater.js","sourceRoot":"","sources":["../src/use-partial-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAS,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAGxC,MAAM,UAAU,iBAAiB,CAC/B,OAA4B,EAC5B,mBAAmD,EACnD,iBAAsE;IAEtE,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,OAAO,GAA0B,WAAW,CAAC,mBAAmB,CAAC,EAAE;QACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;QAEjC,MAAM,eAAe,GAAiB,EAAE,CAAC,GAAG,EAAE;YAC5C,IAAI,UAAU,CAAC,mBAAmB,CAAC,EAAE;gBACnC,MAAM,EAAE,GAAG,mBAAmB,CAAA;gBAC9B,MAAM,eAAe,GAAG,OAAO,CAC7B,mBAAmB,CAAC,QAAQ,CAAC,EAE7B,EAAE,CACH,CAAA;gBACD,OAAO,eAAe,CAAA;aACvB;iBAAM;gBACL,MAAM,eAAe,GAAG,mBAAmB,CAAA;gBAC3C,OAAO,eAAe,CAAA;aACvB;QACH,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEnD,OAAO,OAAO,CAAA;AAChB,CAAC"}

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,16 @@
 import { useState, useContext, useEffect } from 'react';
-export function useSelector(context, selector) {
+import { isReferenceEqual } from 'extra-utils';
+export function useSelector(context, selector, isEqual = isReferenceEqual) {
     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;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAE3D,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.6",
   "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,19 +50,20 @@
     "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"
   },
   "dependencies": {
     "@blackglory/prelude": "^0.3.3",
-    "@blackglory/structures": "^0.13.4"
+    "@blackglory/structures": "^0.13.4",
+    "extra-utils": "^5.4.0"
   },
   "peerDependencies": {
     "immer": "^10.0.2",

package/src/use-partial-updater.ts

@@ -1,6 +1,7 @@
 import { useCallback, useContext } from 'react'
 import { Draft, produce } from 'immer'
-import { go, isFunction } from '@blackglory/prelude'
+import { go } from '@blackglory/prelude'
+import { isFunction } from 'extra-utils'
 import { StoreContext, Updater } from './types.js'
 
 export function usePartialUpdater<State, PartialState>(

package/src/use-selector.ts

@@ -1,21 +1,24 @@
 import { useState, useContext, useEffect } from 'react'
 import { StoreContext } from './types.js'
+import { isReferenceEqual } from 'extra-utils'
 
 export function useSelector<State, Value>(
   context: StoreContext<State>
 , selector: (state: State) => Value
+, isEqual: (a: Value, b: Value) => boolean = isReferenceEqual
 ): 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
 }