zustand-kit 0.1.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -15
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/package.json +1 -1
- package/types/index.d.ts +55 -20
package/README.md
CHANGED
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
- 🚀 **简单易用** - 最小化的 API 设计,易于上手
|
|
10
10
|
- 🎯 **类型安全** - 完整的 TypeScript 支持
|
|
11
11
|
- 💾 **持久化** - 内置 localStorage/sessionStorage 支持
|
|
12
|
+
- 🔍 **开发者工具** - 开发环境自动集成 Redux DevTools
|
|
12
13
|
- ⚡ **高性能** - 基于 Zustand,性能卓越
|
|
13
14
|
- 🔄 **灵活更新** - 支持对象部分更新和函数式更新
|
|
14
|
-
- 🎨
|
|
15
|
+
- 🎨 **智能选择器** - 细粒度订阅,自动检测返回值类型并优化性能
|
|
15
16
|
- 🌐 **非 React 环境支持** - 提供独立的 API 用于非组件场景
|
|
16
17
|
|
|
17
18
|
## 📦 安装
|
|
18
19
|
|
|
19
|
-
yarn add zustand-x zustand
|
|
20
20
|
```bash
|
|
21
21
|
npm install zustand-kit zustand
|
|
22
22
|
# 或
|
|
@@ -49,7 +49,7 @@ function Counter() {
|
|
|
49
49
|
### 对象状态(支持部分更新)
|
|
50
50
|
|
|
51
51
|
```tsx
|
|
52
|
-
import { useGlobalState } from 'zustand-
|
|
52
|
+
import { useGlobalState } from 'zustand-kit';
|
|
53
53
|
|
|
54
54
|
function UserProfile() {
|
|
55
55
|
const [user, setUser, resetUser] = useGlobalState('user', {
|
|
@@ -75,10 +75,10 @@ function UserProfile() {
|
|
|
75
75
|
### 持久化状态
|
|
76
76
|
|
|
77
77
|
```tsx
|
|
78
|
-
import { useGlobalState } from 'zustand-
|
|
78
|
+
import { useGlobalState } from 'zustand-kit';
|
|
79
79
|
|
|
80
80
|
function Settings() {
|
|
81
|
-
// 使用 localStorage
|
|
81
|
+
// 使用 localStorage 持久化(开发环境自动启用 DevTools)
|
|
82
82
|
const [settings, setSettings] = useGlobalState(
|
|
83
83
|
'settings',
|
|
84
84
|
{ theme: 'dark', lang: 'zh-CN' },
|
|
@@ -106,13 +106,37 @@ function Settings() {
|
|
|
106
106
|
}
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
+
### Redux DevTools 集成
|
|
110
|
+
|
|
111
|
+
在开发环境下,所有全局状态会自动集成 Redux DevTools,便于调试:
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
import { useGlobalState } from 'zustand-kit';
|
|
115
|
+
|
|
116
|
+
// 开发环境自动启用 DevTools(默认行为)
|
|
117
|
+
const [data, setData] = useGlobalState('data', { count: 0 });
|
|
118
|
+
|
|
119
|
+
// 禁用 DevTools(即使在开发环境)
|
|
120
|
+
const [privateData, setPrivateData] = useGlobalState('private', {}, {
|
|
121
|
+
enableDevtools: false
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
// 强制启用 DevTools(生产环境,不推荐)
|
|
125
|
+
const [debugData, setDebugData] = useGlobalState('debug', {}, {
|
|
126
|
+
enableDevtools: true
|
|
127
|
+
});
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
在 Redux DevTools 中,每个状态会以 `GlobalState:{key}` 命名显示。
|
|
131
|
+
|
|
109
132
|
### 选择器模式(性能优化)
|
|
110
133
|
|
|
111
134
|
```tsx
|
|
112
|
-
import { useGlobalSelector } from 'zustand-
|
|
135
|
+
import { useGlobalSelector } from 'zustand-kit';
|
|
113
136
|
|
|
114
137
|
function UserName() {
|
|
115
138
|
// 仅订阅 user.name,其他字段变化不会触发重渲染
|
|
139
|
+
// 自动检测:基本类型使用 Object.is
|
|
116
140
|
const userName = useGlobalSelector('user', (state) => state.name);
|
|
117
141
|
|
|
118
142
|
return <p>用户名: {userName}</p>;
|
|
@@ -124,12 +148,44 @@ function UserEmail() {
|
|
|
124
148
|
|
|
125
149
|
return <p>邮箱: {userEmail}</p>;
|
|
126
150
|
}
|
|
151
|
+
|
|
152
|
+
// 自动检测:对象返回值自动使用浅比较
|
|
153
|
+
function UserInfo() {
|
|
154
|
+
const userInfo = useGlobalSelector(
|
|
155
|
+
'user',
|
|
156
|
+
(state) => ({ name: state.name, email: state.email })
|
|
157
|
+
// 无需指定 'shallow',自动检测对象类型并使用浅比较
|
|
158
|
+
);
|
|
159
|
+
|
|
160
|
+
return (
|
|
161
|
+
<div>
|
|
162
|
+
<p>姓名: {userInfo.name}</p>
|
|
163
|
+
<p>邮箱: {userInfo.email}</p>
|
|
164
|
+
</div>
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// 显式指定 'shallow' 模式
|
|
169
|
+
function UserInfoExplicit() {
|
|
170
|
+
const userInfo = useGlobalSelector(
|
|
171
|
+
'user',
|
|
172
|
+
(state) => ({ name: state.name, email: state.email }),
|
|
173
|
+
'shallow' // 显式指定浅比较
|
|
174
|
+
);
|
|
175
|
+
|
|
176
|
+
return (
|
|
177
|
+
<div>
|
|
178
|
+
<p>姓名: {userInfo.name}</p>
|
|
179
|
+
<p>邮箱: {userInfo.email}</p>
|
|
180
|
+
</div>
|
|
181
|
+
);
|
|
182
|
+
}
|
|
127
183
|
```
|
|
128
184
|
|
|
129
185
|
### 仅获取 Setter(不订阅状态)
|
|
130
186
|
|
|
131
187
|
```tsx
|
|
132
|
-
import { useGlobalSetter } from 'zustand-
|
|
188
|
+
import { useGlobalSetter } from 'zustand-kit';
|
|
133
189
|
|
|
134
190
|
function IncrementButton() {
|
|
135
191
|
// 只获取 setter,不订阅状态变化(不会重渲染)
|
|
@@ -145,7 +201,7 @@ function IncrementButton() {
|
|
|
145
201
|
|
|
146
202
|
## 🔧 非 React 环境使用
|
|
147
203
|
|
|
148
|
-
zustand-
|
|
204
|
+
zustand-kit 提供了独立的 API,可以在非 React 组件中使用:
|
|
149
205
|
|
|
150
206
|
```typescript
|
|
151
207
|
import {
|
|
@@ -153,7 +209,7 @@ import {
|
|
|
153
209
|
setGlobalState,
|
|
154
210
|
subscribeGlobalState,
|
|
155
211
|
resetGlobalState
|
|
156
|
-
} from 'zustand-
|
|
212
|
+
} from 'zustand-kit';
|
|
157
213
|
|
|
158
214
|
// 获取状态
|
|
159
215
|
const count = getGlobalState<number>('counter');
|
|
@@ -189,13 +245,18 @@ resetGlobalState('counter');
|
|
|
189
245
|
|
|
190
246
|
**返回:** `[state, setState, resetState]`
|
|
191
247
|
|
|
192
|
-
### `useGlobalSelector<T, R>(key, selector)`
|
|
248
|
+
### `useGlobalSelector<T, R>(key, selector, equalityMode?)`
|
|
193
249
|
|
|
194
|
-
|
|
250
|
+
使用选择器订阅状态的特定部分。支持自动检测返回值类型并选择合适的比较模式。
|
|
195
251
|
|
|
196
252
|
**参数:**
|
|
197
253
|
- `key: string` - 状态键
|
|
198
254
|
- `selector: (state: T) => R` - 选择器函数
|
|
255
|
+
- `equalityMode?: 'shallow'` - 可选的比较模式
|
|
256
|
+
- `undefined` (默认):自动检测返回值类型
|
|
257
|
+
- 基本类型:使用 `Object.is`
|
|
258
|
+
- 对象/数组:使用浅比较
|
|
259
|
+
- `'shallow'`:强制使用浅比较
|
|
199
260
|
|
|
200
261
|
**返回:** 选择的值
|
|
201
262
|
|
|
@@ -226,7 +287,7 @@ resetGlobalState('counter');
|
|
|
226
287
|
|
|
227
288
|
## 🎨 TypeScript 支持
|
|
228
289
|
|
|
229
|
-
zustand-
|
|
290
|
+
zustand-kit 使用 TypeScript 编写,提供完整的类型推断:
|
|
230
291
|
|
|
231
292
|
```typescript
|
|
232
293
|
// 自动推断类型
|
|
@@ -255,7 +316,7 @@ const [user, setUser] = useGlobalState<User>('user', {
|
|
|
255
316
|
|
|
256
317
|
## 🤝 对比其他方案
|
|
257
318
|
|
|
258
|
-
| 特性 | zustand-
|
|
319
|
+
| 特性 | zustand-kit | Zustand | Redux | Context API |
|
|
259
320
|
|------|-----------|---------|-------|-------------|
|
|
260
321
|
| 学习曲线 | ⭐️ 简单 | ⭐️⭐️ 较简单 | ⭐️⭐️⭐️ 复杂 | ⭐️⭐️ 中等 |
|
|
261
322
|
| 包体积 | 极小 | 小 | 大 | 无 |
|
|
@@ -286,8 +347,8 @@ MIT
|
|
|
286
347
|
|
|
287
348
|
## 🔗 链接
|
|
288
349
|
|
|
289
|
-
- [GitHub](https://github.com/leonwgc/zustand-
|
|
290
|
-
- [Issues](https://github.com/leonwgc/zustand-
|
|
350
|
+
- [GitHub](https://github.com/leonwgc/zustand-kit)
|
|
351
|
+
- [Issues](https://github.com/leonwgc/zustand-kit/issues)
|
|
291
352
|
- [Zustand](https://github.com/pmndrs/zustand)
|
|
292
353
|
|
|
293
354
|
## 👨💻 作者
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }var E=Object.defineProperty;var v=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var w=(t,e,o)=>e in t?E(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,g=(t,e)=>{for(var o in e||(e={}))B.call(e,o)&&w(t,o,e[o]);if(v)for(var o of v(e))$.call(e,o)&&w(t,o,e[o]);return t};var _react = require('react'); var U = _interopRequireWildcard(_react);var _zustand = require('zustand');var _middleware = require('zustand/middleware');var _shallow = require('zustand/react/shallow');var n=new Map;function J(){n.clear()}function _(t,e,o){let{storage:r="none",storageKey:i="global-state",enableDevtools:a=process.env.NODE_ENV!=="production"}=o||{};if(!n.has(t)){let u=typeof e=="object"&&e!==null&&!Array.isArray(e),p=l=>({value:e,setValue:S=>{l(typeof S=="function"?T=>({value:S(T.value)}):u&&typeof S=="object"&&S!==null?T=>({value:g(g({},T.value),S)}):{value:S})},reset:()=>l({value:e})}),c;if(r!=="none"&&a){let l=r==="localStorage"?localStorage:sessionStorage;c=_zustand.create.call(void 0, )(_middleware.devtools.call(void 0, _middleware.persist.call(void 0, p,{name:`${i}-${t}`,storage:_middleware.createJSONStorage.call(void 0, ()=>l)}),{name:`GlobalState:${t}`}))}else if(r!=="none"){let l=r==="localStorage"?localStorage:sessionStorage;c=_zustand.create.call(void 0, )(_middleware.persist.call(void 0, p,{name:`${i}-${t}`,storage:_middleware.createJSONStorage.call(void 0, ()=>l)}))}else a?c=_zustand.create.call(void 0, )(_middleware.devtools.call(void 0, p,{name:`GlobalState:${t}`})):c=_zustand.create.call(void 0, p);n.set(t,c)}let s=n.get(t),b=s(u=>u.value),A=_react.useMemo.call(void 0, ()=>u=>s.getState().setValue(u),[s]),x=_react.useMemo.call(void 0, ()=>()=>s.getState().reset(),[s]);return[b,A,x]}function M(t,e,o){let r=n.get(t);if(!r)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);let i=_react.useRef.call(void 0, e);_react.useEffect.call(void 0, ()=>{i.current=e});let a=_react.useCallback.call(void 0, s=>i.current(s.value),[]);if(o===void 0){let s=a(r.getState());return s!==null&&typeof s=="object"&&!U.isValidElement(s)?r(_shallow.useShallow.call(void 0, a)):r(a)}return r(o==="shallow"?_shallow.useShallow.call(void 0, a):a)}function k(t){let e=n.get(t);if(!e)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return _react.useMemo.call(void 0, ()=>o=>e.getState().setValue(o),[e])}function F(t){let e=n.get(t);return e==null?void 0:e.getState().value}function H(t,e){let o=n.get(t);if(!o){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}o.getState().setValue(e)}function L(t,e){let o=n.get(t);if(!o)return process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`),()=>{};let r=o.getState().value;return o.subscribe(i=>{let a=i.value;Object.is(a,r)||(e(a,r),r=a)})}function Q(t){let e=n.get(t);if(!e){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}e.getState().reset()}var W=_;exports.__clearAllStates__ = J; exports.default = W; exports.getGlobalState = F; exports.resetGlobalState = Q; exports.setGlobalState = H; exports.subscribeGlobalState = L; exports.useGlobalSelector = M; exports.useGlobalSetter = k; exports.useGlobalState = _;
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var E=Object.defineProperty;var v=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var w=(t,e,o)=>e in t?E(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,g=(t,e)=>{for(var o in e||(e={}))B.call(e,o)&&w(t,o,e[o]);if(v)for(var o of v(e))$.call(e,o)&&w(t,o,e[o]);return t};import*as U from"react";import{create as f}from"zustand";import{persist as V,createJSONStorage as G,devtools as h}from"zustand/middleware";import{useMemo as d,useRef as R,useCallback as N,useEffect as O}from"react";import{useShallow as m}from"zustand/react/shallow";var n=new Map;function J(){n.clear()}function _(t,e,o){let{storage:r="none",storageKey:i="global-state",enableDevtools:a=process.env.NODE_ENV!=="production"}=o||{};if(!n.has(t)){let u=typeof e=="object"&&e!==null&&!Array.isArray(e),p=l=>({value:e,setValue:S=>{l(typeof S=="function"?T=>({value:S(T.value)}):u&&typeof S=="object"&&S!==null?T=>({value:g(g({},T.value),S)}):{value:S})},reset:()=>l({value:e})}),c;if(r!=="none"&&a){let l=r==="localStorage"?localStorage:sessionStorage;c=f()(h(V(p,{name:`${i}-${t}`,storage:G(()=>l)}),{name:`GlobalState:${t}`}))}else if(r!=="none"){let l=r==="localStorage"?localStorage:sessionStorage;c=f()(V(p,{name:`${i}-${t}`,storage:G(()=>l)}))}else a?c=f()(h(p,{name:`GlobalState:${t}`})):c=f(p);n.set(t,c)}let s=n.get(t),b=s(u=>u.value),A=d(()=>u=>s.getState().setValue(u),[s]),x=d(()=>()=>s.getState().reset(),[s]);return[b,A,x]}function M(t,e,o){let r=n.get(t);if(!r)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);let i=R(e);O(()=>{i.current=e});let a=N(s=>i.current(s.value),[]);if(o===void 0){let s=a(r.getState());return s!==null&&typeof s=="object"&&!U.isValidElement(s)?r(m(a)):r(a)}return r(o==="shallow"?m(a):a)}function k(t){let e=n.get(t);if(!e)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return d(()=>o=>e.getState().setValue(o),[e])}function F(t){let e=n.get(t);return e==null?void 0:e.getState().value}function H(t,e){let o=n.get(t);if(!o){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}o.getState().setValue(e)}function L(t,e){let o=n.get(t);if(!o)return process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`),()=>{};let r=o.getState().value;return o.subscribe(i=>{let a=i.value;Object.is(a,r)||(e(a,r),r=a)})}function Q(t){let e=n.get(t);if(!e){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}e.getState().reset()}var W=_;export{J as __clearAllStates__,W as default,F as getGlobalState,Q as resetGlobalState,H as setGlobalState,L as subscribeGlobalState,M as useGlobalSelector,k as useGlobalSetter,_ as useGlobalState};
|
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file src/index.tsx
|
|
3
|
-
* @author leon.wang
|
|
4
|
-
*/
|
|
5
1
|
/**
|
|
6
2
|
* Clear all global states (for testing purposes)
|
|
7
3
|
* @internal
|
|
@@ -11,6 +7,10 @@ export declare function __clearAllStates__(): void;
|
|
|
11
7
|
* Storage type for persistence
|
|
12
8
|
*/
|
|
13
9
|
export type StorageType = 'localStorage' | 'sessionStorage' | 'none';
|
|
10
|
+
/**
|
|
11
|
+
* Helper type for setter value - supports partial updates for objects
|
|
12
|
+
*/
|
|
13
|
+
type SetterValue<T> = T extends Record<string, unknown> ? Partial<T> | ((prev: T) => T) : T | ((prev: T) => T);
|
|
14
14
|
/**
|
|
15
15
|
* Options for useGlobalState
|
|
16
16
|
*/
|
|
@@ -25,14 +25,19 @@ export interface UseGlobalStateOptions {
|
|
|
25
25
|
* @default 'global-state'
|
|
26
26
|
*/
|
|
27
27
|
storageKey?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Enable Redux DevTools integration
|
|
30
|
+
* @default true in development, false in production
|
|
31
|
+
*/
|
|
32
|
+
enableDevtools?: boolean;
|
|
28
33
|
}
|
|
29
34
|
/**
|
|
30
35
|
* Universal global state hook - supports both simple values and objects
|
|
31
|
-
* Performance optimized with selector pattern
|
|
36
|
+
* Performance optimized with selector pattern and automatic Redux DevTools integration
|
|
32
37
|
*
|
|
33
38
|
* @param key - Unique key for the state
|
|
34
39
|
* @param initialState - Initial state (any type)
|
|
35
|
-
* @param options - Configuration options including persistence
|
|
40
|
+
* @param options - Configuration options including persistence and devtools
|
|
36
41
|
* @returns [state, setState, resetState]
|
|
37
42
|
*
|
|
38
43
|
* @example
|
|
@@ -45,42 +50,72 @@ export interface UseGlobalStateOptions {
|
|
|
45
50
|
* const [user, setUser, resetUser] = useGlobalState('user', {
|
|
46
51
|
* name: 'John',
|
|
47
52
|
* email: 'john@example.com',
|
|
53
|
+
* age: 30
|
|
48
54
|
* });
|
|
49
|
-
* setUser({ name: 'Jane' }); // Partial update
|
|
55
|
+
* setUser({ name: 'Jane' }); // Partial update - only updates name field
|
|
56
|
+
* setUser(prev => ({ ...prev, age: prev.age + 1 })); // Functional update
|
|
50
57
|
*
|
|
51
|
-
* // With localStorage persistence
|
|
58
|
+
* // With localStorage persistence (DevTools enabled by default in development)
|
|
52
59
|
* const [settings, setSettings] = useGlobalState('settings', { theme: 'dark' }, {
|
|
53
60
|
* storage: 'localStorage'
|
|
54
61
|
* });
|
|
55
62
|
*
|
|
56
|
-
* // With sessionStorage persistence
|
|
63
|
+
* // With sessionStorage persistence and custom storage key
|
|
57
64
|
* const [tempData, setTempData] = useGlobalState('temp', { foo: 'bar' }, {
|
|
58
65
|
* storage: 'sessionStorage',
|
|
59
66
|
* storageKey: 'my-app'
|
|
60
67
|
* });
|
|
61
68
|
*
|
|
69
|
+
* // Disable DevTools in development
|
|
70
|
+
* const [privateData, setPrivateData] = useGlobalState('private', {}, {
|
|
71
|
+
* enableDevtools: false
|
|
72
|
+
* });
|
|
73
|
+
*
|
|
74
|
+
* // Force enable DevTools in production (not recommended)
|
|
75
|
+
* const [debugData, setDebugData] = useGlobalState('debug', {}, {
|
|
76
|
+
* enableDevtools: true
|
|
77
|
+
* });
|
|
78
|
+
*
|
|
62
79
|
* // For non-React usage, see: getGlobalState, setGlobalState, subscribeGlobalState, resetGlobalState
|
|
63
80
|
*/
|
|
64
|
-
export declare function useGlobalState<T>(key: string, initialState: T, options?: UseGlobalStateOptions): [
|
|
65
|
-
T,
|
|
66
|
-
(value: T extends Record<string, unknown> ? Partial<T> | ((prev: T) => T) : T | ((prev: T) => T)) => void,
|
|
67
|
-
() => void
|
|
68
|
-
];
|
|
81
|
+
export declare function useGlobalState<T>(key: string, initialState: T, options?: UseGlobalStateOptions): [T, (value: SetterValue<T>) => void, () => void];
|
|
69
82
|
/**
|
|
70
83
|
* Advanced hook with custom selector for fine-grained subscriptions
|
|
71
84
|
* Only re-renders when selected value changes
|
|
85
|
+
* Automatically detects return type and uses appropriate comparison mode
|
|
86
|
+
*
|
|
87
|
+
* @param key - Global state key
|
|
88
|
+
* @param selector - Function to select part of the state
|
|
89
|
+
* @param equalityMode - Optional comparison mode:
|
|
90
|
+
* - undefined (default): Auto-detect based on return type (shallow for objects/arrays, Object.is for primitives)
|
|
91
|
+
* - 'shallow': Force shallow comparison
|
|
92
|
+
* - false: Force Object.is comparison
|
|
72
93
|
*
|
|
73
94
|
* @example
|
|
74
|
-
* //
|
|
95
|
+
* // Auto mode: uses Object.is for primitive
|
|
75
96
|
* const userName = useGlobalSelector('user', (state) => state.name);
|
|
76
97
|
*
|
|
77
|
-
* //
|
|
78
|
-
* const
|
|
98
|
+
* // Auto mode: uses shallow for object
|
|
99
|
+
* const userInfo = useGlobalSelector(
|
|
79
100
|
* 'user',
|
|
80
101
|
* (state) => ({ name: state.name, email: state.email })
|
|
81
102
|
* );
|
|
103
|
+
*
|
|
104
|
+
* // Force shallow comparison
|
|
105
|
+
* const userInfo = useGlobalSelector(
|
|
106
|
+
* 'user',
|
|
107
|
+
* (state) => ({ name: state.name, email: state.email }),
|
|
108
|
+
* 'shallow'
|
|
109
|
+
* );
|
|
110
|
+
*
|
|
111
|
+
* // Force Object.is comparison (even for objects)
|
|
112
|
+
* const userInfo = useGlobalSelector(
|
|
113
|
+
* 'user',
|
|
114
|
+
* (state) => ({ name: state.name, email: state.email }),
|
|
115
|
+
* false
|
|
116
|
+
* );
|
|
82
117
|
*/
|
|
83
|
-
export declare function useGlobalSelector<T, R>(key: string, selector: (state: T) => R): R;
|
|
118
|
+
export declare function useGlobalSelector<T, R>(key: string, selector: (state: T) => R, equalityMode?: 'shallow' | false): R;
|
|
84
119
|
/**
|
|
85
120
|
* Hook to get setter function only (doesn't subscribe to state changes)
|
|
86
121
|
* Useful when you only need to update state without reading it
|
|
@@ -90,7 +125,7 @@ export declare function useGlobalSelector<T, R>(key: string, selector: (state: T
|
|
|
90
125
|
* setCount(5);
|
|
91
126
|
* setCount(prev => prev + 1);
|
|
92
127
|
*/
|
|
93
|
-
export declare function useGlobalSetter<T>(key: string): (value:
|
|
128
|
+
export declare function useGlobalSetter<T>(key: string): (value: SetterValue<T>) => void;
|
|
94
129
|
/**
|
|
95
130
|
* Get global state value (for non-React usage)
|
|
96
131
|
* @example
|
|
@@ -104,7 +139,7 @@ export declare function getGlobalState<T>(key: string): T | undefined;
|
|
|
104
139
|
* setGlobalState('counter', prev => prev + 1);
|
|
105
140
|
* setGlobalState('user', { name: 'Jane' }); // Partial update for objects
|
|
106
141
|
*/
|
|
107
|
-
export declare function setGlobalState<T>(key: string, value:
|
|
142
|
+
export declare function setGlobalState<T>(key: string, value: SetterValue<T>): void;
|
|
108
143
|
/**
|
|
109
144
|
* Subscribe to global state changes (for non-React usage)
|
|
110
145
|
* Returns unsubscribe function
|