Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitbcef26b

Browse files
committed
feat: Add support for store.subscribe
1 parentdc76e8a commitbcef26b

File tree

7 files changed

+504
-2
lines changed

7 files changed

+504
-2
lines changed

‎.changeset/bright-sheep-talk.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'zustand-x':minor
3+
---
4+
5+
feat:`store.subscribe` support

‎README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,32 @@ store.set('state', (draft) => {
125125
});
126126
```
127127

128+
###Subscribing State
129+
```ts
130+
// Subscribe to changes
131+
const unsubscribe=store.subscribe('name', (name,previousName)=> {
132+
console.log('Name changed from',previousName,'to',name);
133+
});
134+
135+
// Subscribe to the entire state
136+
const unsubscribe=store.subscribe('state', (state)=> {
137+
console.log('State changed:',state);
138+
});
139+
140+
// Subscribe to a selector with arguments
141+
const unsubscribe=store.subscribe('someSelector',1,2 (result)=> {
142+
console.log('Selector result changed:',result);
143+
});
144+
145+
// Subscribe with an additional selector and options
146+
const unsubscribe=store.subscribe(
147+
'name',
148+
name=>name.length,
149+
length=>console.log('Name length changed:',length),
150+
{ fireImmediately:true }// Fire the callback immediately when subscribing
151+
);
152+
```
153+
128154
###React Hooks
129155

130156
####`useStoreValue(store, key, ...args)`

‎packages/zustand-x/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,32 @@ store.set('state', (draft) => {
125125
});
126126
```
127127

128+
###Subscribing State
129+
```ts
130+
// Subscribe to changes
131+
const unsubscribe=store.subscribe('name', (name,previousName)=> {
132+
console.log('Name changed from',previousName,'to',name);
133+
});
134+
135+
// Subscribe to the entire state
136+
const unsubscribe=store.subscribe('state', (state)=> {
137+
console.log('State changed:',state);
138+
});
139+
140+
// Subscribe to a selector with arguments
141+
const unsubscribe=store.subscribe('someSelector',1,2 (result)=> {
142+
console.log('Selector result changed:',result);
143+
});
144+
145+
// Subscribe with an additional selector and options
146+
const unsubscribe=store.subscribe(
147+
'name',
148+
name=>name.length,
149+
length=>console.log('Name length changed:',length),
150+
{ fireImmediately:true }// Fire the callback immediately when subscribing
151+
);
152+
```
153+
128154
###React Hooks
129155

130156
####`useStoreValue(store, key, ...args)`

‎packages/zustand-x/src/createStore.ts‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import{createTrackedSelector}from'react-tracked';
2+
import{subscribeWithSelector}from'zustand/middleware';
23
import{createWithEqualityFnascreateStoreZustand}from'zustand/traditional';
34

45
import{
@@ -92,7 +93,7 @@ export const createStore = <
9293
:()=>initializer)asStateCreator<StateType>
9394
)asStateCreator<StateType,[],Mutators>;
9495

95-
conststore=createStoreZustand(stateMutators);
96+
conststore=createStoreZustand(subscribeWithSelector(stateMutators));
9697

9798
constuseTrackedStore=createTrackedSelector(store);
9899

@@ -108,6 +109,33 @@ export const createStore = <
108109
returnstore.getState()[keyaskeyofStateType];
109110
};
110111

112+
constsubscribeFn=(
113+
key:string,
114+
selector:any,
115+
listener:any,
116+
subscribeOptions:any
117+
)=>{
118+
if(key==='state'){
119+
//@ts-expect-error -- typescript is unable to infer the 3 args version
120+
returnstore.subscribe(selector,listener,subscribeOptions);
121+
}
122+
123+
letwrappedSelector:any;
124+
125+
if(listener){
126+
// subscribe(selector, listener, subscribeOptions) variant
127+
wrappedSelector=(state:StateType)=>
128+
selector(state[keyaskeyofStateType]);
129+
}else{
130+
// subscribe(listener) variant
131+
listener=selector;
132+
wrappedSelector=(state:StateType)=>state[keyaskeyofStateType];
133+
}
134+
135+
//@ts-expect-error -- typescript is unable to infer the 3 args version
136+
returnstore.subscribe(wrappedSelector,listener,subscribeOptions);
137+
};
138+
111139
constisMutative=
112140
isMutativeState||
113141
_immerOptionsInternal.enabled||
@@ -157,6 +185,7 @@ export const createStore = <
157185
get:getFn,
158186
name,
159187
set:setFn,
188+
subscribe:subscribeFn,
160189
store,
161190
useStore:store,
162191
useValue,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp