Match-id-204bc47828a04bfb747ed16f9dbd8d1885dddb7d
This commit is contained in:
parent
2994b7cd77
commit
8995659ea5
|
@ -33,12 +33,11 @@ export function createSelectorHook(context: Context): (selector?: (any) => any)
|
||||||
return function(selector = state => state) {
|
return function(selector = state => state) {
|
||||||
const [b, fr] = useState(false);
|
const [b, fr] = useState(false);
|
||||||
|
|
||||||
const listener = () => {
|
|
||||||
fr(!b);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return store.subscribe(listener);
|
const unsubscribe = store.subscribe(() => fr(!b));
|
||||||
|
return () => {
|
||||||
|
unsubscribe();
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
return selector(store.getState());
|
return selector(store.getState());
|
||||||
|
@ -110,7 +109,7 @@ export function connect(
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const unsubscribe = store.subscribe(() => forceReload(!f));
|
const unsubscribe = store.subscribe(() => forceReload(!f));
|
||||||
() => {
|
return () => {
|
||||||
unsubscribe();
|
unsubscribe();
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
|
@ -15,7 +15,7 @@ function isPromise(obj: any): boolean {
|
||||||
|
|
||||||
type StoreConfig<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>> = {
|
type StoreConfig<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>> = {
|
||||||
state?: S;
|
state?: S;
|
||||||
options?: { suppressHooks?: boolean };
|
// options?: { suppressHooks?: boolean };
|
||||||
actions?: A;
|
actions?: A;
|
||||||
id?: string;
|
id?: string;
|
||||||
computed?: C;
|
computed?: C;
|
||||||
|
@ -27,18 +27,18 @@ export type ReduxStoreHandler = {
|
||||||
getState: () => any;
|
getState: () => any;
|
||||||
subscribe: (listener: () => void) => () => void;
|
subscribe: (listener: () => void) => () => void;
|
||||||
replaceReducer: (reducer: (state: any, action: { type: string }) => any) => void;
|
replaceReducer: (reducer: (state: any, action: { type: string }) => any) => void;
|
||||||
_horizonXstore: StoreHandler<any, any, any>;
|
// _horizonXstore: StoreHandler<any, any, any>;
|
||||||
};
|
};
|
||||||
|
|
||||||
type StoreHandler<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>> = {
|
type StoreHandler<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>> = {
|
||||||
$subscribe: (listener: () => void) => void;
|
$subscribe: (listener: () => void) => void;
|
||||||
$unsubscribe: (listener: () => void) => void;
|
$unsubscribe: (listener: () => void) => void;
|
||||||
$s: S;
|
$s: S;
|
||||||
$config: StoreConfig<S, A, C>;
|
// $config: StoreConfig<S, A, C>;
|
||||||
$queue: QueuedStoreActions<S, A>;
|
$queue: QueuedStoreActions<S, A>;
|
||||||
$a: StoreActions<S, A>;
|
$a: StoreActions<S, A>;
|
||||||
$c: UserComputedValues<S>;
|
$c: UserComputedValues<S>;
|
||||||
reduxHandler?: ReduxStoreHandler;
|
// reduxHandler?: ReduxStoreHandler;
|
||||||
} & { [K in keyof S]: S[K] } &
|
} & { [K in keyof S]: S[K] } &
|
||||||
{ [K in keyof A]: Action<A[K], S> } &
|
{ [K in keyof A]: Action<A[K], S> } &
|
||||||
{ [K in keyof C]: ReturnType<C[K]> };
|
{ [K in keyof C]: ReturnType<C[K]> };
|
||||||
|
@ -256,13 +256,15 @@ function hookStore() {
|
||||||
function createStoreHook<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>>(
|
function createStoreHook<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>>(
|
||||||
storeHandler: StoreHandler<S, A, C>
|
storeHandler: StoreHandler<S, A, C>
|
||||||
): () => StoreHandler<S, A, C> {
|
): () => StoreHandler<S, A, C> {
|
||||||
return () => {
|
const storeHook = () => {
|
||||||
if (!storeHandler.$config.options?.suppressHooks) {
|
if (!storeHandler.$config.options?.suppressHooks) {
|
||||||
hookStore();
|
hookStore();
|
||||||
}
|
}
|
||||||
|
|
||||||
return storeHandler;
|
return storeHandler;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
return storeHook;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useStore<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>>(
|
export function useStore<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>>(
|
||||||
|
|
|
@ -107,4 +107,49 @@ describe('Basic store manipulation', () => {
|
||||||
|
|
||||||
expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('5');
|
expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('5');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should call computed from own actions', () => {
|
||||||
|
const useIncrementStore = createStore({
|
||||||
|
id: 'incrementStore',
|
||||||
|
state: {
|
||||||
|
count: 2,
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
doublePlusOne: function(state) {
|
||||||
|
state.count = this.double + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
double: (state) => {
|
||||||
|
return state.count*2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const incrementStore = useIncrementStore();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
id={BUTTON_ID}
|
||||||
|
onClick={() => {
|
||||||
|
incrementStore.doublePlusOne();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
<p id={RESULT_ID}>{incrementStore.count}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Horizon.render(<App />, container);
|
||||||
|
|
||||||
|
Horizon.act(() => {
|
||||||
|
triggerClickEvent(container, BUTTON_ID);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('5');
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue