From 68ecadd4abd89e10dbc4691e3579cc42e9b0a2f6 Mon Sep 17 00:00:00 2001 From: yezy Date: Fri, 4 Feb 2022 23:48:39 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=85Update=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/subscription.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/subscription.test.ts b/tests/subscription.test.ts index 149e206..23ba530 100644 --- a/tests/subscription.test.ts +++ b/tests/subscription.test.ts @@ -13,10 +13,10 @@ test('should update testVal1 & testVal2 through subscribers', () => { const { result } = renderHook(() => store.useState("count")) act(() => { - store.subscribe((event) => { + store.subscribe((key, value) => { testVal1 = 1 }) - store.getState("count").subscribe((val) => { + store.getState("count").subscribe((value) => { testVal2 = 2 }) result.current[2](count => 1) From 155ecf8ad0dfbfed857dca76cbcc1c33c5b93546 Mon Sep 17 00:00:00 2001 From: yezy Date: Fri, 4 Feb 2022 23:49:03 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=93=9DUpdate=20README.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index adb9a91..c3b90c8 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ store.setState("count", 0); // Create "count" global state and add it to the st function ClicksCounter(props){ // Use "count" global state - const [count, setCount, updateCount] = store.useState("count"); + const [count, setCount] = store.useState("count"); const incrementCount = (e) => { setCount(count+1) @@ -246,11 +246,10 @@ Other allowed configurations are `selector` & `patcher`. These are used for spec const selector = (user) => user.name; // Subscribe to user.name only const patcher = (user, name) => {user.name = name}; // Update user.name - const [name, setName, updateName] = store.useState("user", {selector: selector, patcher: patcher}); + const [name, setName] = store.useState("user", {selector: selector, patcher: patcher}); let handleNameChange = (e) => { setName(e.target.value); - // updateName(name => e.target.value); You can do this if you like to use `updatName` } return ( @@ -324,7 +323,7 @@ function UserInfo(props){ const selector = (user) => user.name; const patcher = (user, name) => {user.name = name}; - const [name, dispatch] = store.useReducer(myReducer, "user", {selector: selector, patcher: patcher}); + const [name, dispatch] = store.useReducer(myReducer, "user", {selector, patcher}); // Other stuff } @@ -352,7 +351,7 @@ If you want to listen to changes in a store you can subscribe to it by using `st ```js // Subscribe to store changes -const unsubscribe = store.subscribe(function({key: String, value: Any}){ +const unsubscribe = store.subscribe(function(key: String, value: Any){ // key is the key for a global state that has changed // value is the new value of a global state }) @@ -366,7 +365,7 @@ If you want to subscribe to a single global state you can use ```js // Subscribe to store changes const unsubscribe = store.getState(key).subscribe(function(value){ - // value is the new value of a global state + // value is the new value of a global state }) // You can unsubscribe by calling the result @@ -554,7 +553,8 @@ store.useState( store.useReducer( reducer: Function, key: String, - config?: {default: Any, persist: Boolean, ...otherConfigs}) + config?: {default: Any, persist: Boolean, ...otherConfigs} +) ``` By default the value of `persist` in all cases is false(which means it doesn't save global states to a permanent storage), so if you want to activate it, you have to set it to be true. @@ -710,7 +710,8 @@ count.getValue() // This will give 0 count.updateValue(val => val+1) // This will increment the value of count -const unsubscribe = count.subscribe(val => console.log(val)) // This will print whenever count change +// This will print whenever count change +const unsubscribe = count.subscribe(val => console.log(val)) unsubscribe() // This will unsubscribe the observer above ``` @@ -766,11 +767,10 @@ function UserName(props){ const selector = (user) => user.name; // Subscribe to user.name only const patcher = (user, name) => {user.name = name}; // Update user.name - const [name, setName, updateName] = useGlobalState(user, {selector: selector, patcher: patcher}); + const [name, setName] = useGlobalState(user, {selector: selector, patcher: patcher}); const handleNameChange = (e) => { setName(e.target.value); - // updateName(name => e.target.value); You can do this if you like to use `updatName` } return ( @@ -846,7 +846,7 @@ function UserInfo(props){ const selector = (user) => user.name; const patcher = (user, name) => {user.name = name}; - const [name, dispatch] = useGlobalStateReducer(myReducer, user, {selector: selector, patcher: patcher}); + const [name, dispatch] = useGlobalStateReducer(myReducer, user, {selector, patcher}); // Other stuffs } From c24be7c84b3d3086c52e1eac1f1c9489d5f609bb Mon Sep 17 00:00:00 2001 From: yezy Date: Fri, 4 Feb 2022 23:50:16 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=E2=9C=A8Improve=20store.subscribe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Store.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/Store.ts b/src/Store.ts index 3547721..5f98c3c 100644 --- a/src/Store.ts +++ b/src/Store.ts @@ -4,8 +4,7 @@ import { useGlobalStateReducer } from './useGlobalStateReducer'; type Reducer = (state: any, action: any) => any -type Event = { key: string, value: any } -type Observer = (event: Event) => void +type Observer = (key: string, value: any) => void type Config = { default?: T, selector?: (state: any) => any, @@ -80,9 +79,9 @@ class Store { return unsubscribe } - onStoreUpdate(event: Event): void { + onStoreUpdate(key: string, value: any): void { this.subscriptions.forEach(subscription => { - subscription(event); + subscription(key, value); }); } @@ -127,7 +126,7 @@ class Store { const onGlobalStateChange = (newValue: any) => { // Note key, persist & timerId variables depends on the scope - this.onStoreUpdate({ key: key, value: newValue }); + this.onStoreUpdate(key, newValue); if (shouldPersist) { this.persistentStorage.saveState(key, newValue, false); @@ -188,7 +187,7 @@ class Store { // Notify subscribers to a store that a global state has been removed if (this.value.has(key)) { const newGlobalState = this.getState(key); - this.onStoreUpdate({ key: key, value: newGlobalState.getValue() }); + this.onStoreUpdate(key, newGlobalState.getValue()); } // Rerender all components using this global state oldState.refresh(); @@ -225,7 +224,7 @@ class Store { // Notify subscribers to a store that a global state has been removed if (this.value.has(key)) { const newGlobalState = this.getState(key); - this.onStoreUpdate({ key: key, value: newGlobalState.getValue() }); + this.onStoreUpdate(key, newGlobalState.getValue()); } // Rerender all components depending on this global state