ProxyStore.ts
// ProxyStore.ts - 代理模式状态容器核心类
export type ProxyStoreSubscriber<T = any> = (
value: T,
key: string,
prevValue: T
) => void
/**
* 代理模式状态容器
* 使用 Proxy 实现透明的响应式状态管理
*/
export class ProxyStore<T extends object = Record<string, any>> {
private target: T
private subscribers = new Map<string | symbol, Set<ProxyStoreSubscriber>>()
private globalSubscribers = new Set<ProxyStoreSubscriber>()
public proxy: T
constructor(initialState: T = {} as T) {
this.target = { ...initialState }
this.proxy = this.createProxy()
}
private createProxy(): T {
return new Proxy(this.target, {
get: (target, key) => {
return Reflect.get(target, key)
},
set: (target, key, value) => {
const prevValue = Reflect.get(target, key)
const result = Reflect.set(target, key, value)
if (prevValue !== value) {
this.notify(key as string, value, prevValue)
}
return result
},
deleteProperty: (target, key) => {
const prevValue = Reflect.get(target, key)
const result = Reflect.deleteProperty(target, key)
this.notify(key as string, undefined, prevValue)
return result
}
})
}
private notify(key: string, value: any, prevValue: any): void {
// 通知特定 key 的订阅者
this.subscribers.get(key)?.forEach((fn) => fn(value, key, prevValue))
// 通知全局订阅者
this.globalSubscribers.forEach((fn) => fn(value, key, prevValue))
}
/**
* 订阅特定 key 的变化
*/
subscribe(key: string, subscriber: ProxyStoreSubscriber): () => void {
if (!this.subscribers.has(key)) {
this.subscribers.set(key, new Set())
}
this.subscribers.get(key)!.add(subscriber)
// 如果已有值,立即触发
if (key in this.target) {
subscriber((this.target as any)[key], key, undefined)
}
return () => this.unsubscribe(key, subscriber)
}
/**
* 取消订阅
*/
unsubscribe(key: string, subscriber: ProxyStoreSubscriber): void {
this.subscribers.get(key)?.delete(subscriber)
}
/**
* 订阅所有变化
*/
subscribeAll(subscriber: ProxyStoreSubscriber): () => void {
this.globalSubscribers.add(subscriber)
return () => this.globalSubscribers.delete(subscriber)
}
/**
* 获取当前状态快照
*/
getSnapshot(): T {
return { ...this.target }
}
/**
* 批量更新(合并触发)
*/
batch(updates: Partial<T>): void {
Object.assign(this.proxy, updates)
}
/**
* 重置状态
*/
reset(newState: T = {} as T): void {
// 删除所有现有 key
Object.keys(this.target).forEach((key) => {
delete (this.proxy as any)[key]
})
// 设置新状态
Object.assign(this.proxy, newState)
}
}
/**
* 创建类型安全的 ProxyStore
*/
export function createProxyStore<T extends object>(
initialState?: T
): ProxyStore<T> {
return new ProxyStore<T>(initialState)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { ProxyStore } from './ProxyStore'
1
