react-global-state-hooks 7.0.0 → 7.0.1

package/README.md

@@ -23,13 +23,21 @@ The best part? **react-hooks-global-states** is compatible with both **React** a
 We are gonna create a global state hook **useCount** with one line of code.
 
 ```ts
-import { createGlobalState } from 'react-global-state-hooks';
+import { createGlobalState } from 'react-global-state-hooks/createGlobalState';
 
 export const useCount = createGlobalState(0);
 ```
 
 That's it! Welcome to global hooks. Now, you can use this state wherever you need it in your application.
 
+The library is builded in modules, you can import everything or only what you need.
+
+```ts
+import { createGlobalState } from 'react-global-state-hooks/createGlobalState';
+
+export const useCount = createGlobalState(0);
+```
+
 Let's see how to use it inside a simple **component**
 
 ```ts
@@ -115,8 +123,7 @@ Okay, everything works when the changes come from the state, but what happens if
 const [filter, setFilter] = useState('');
 
 const [contacts] = useContacts(
-  (state) =>
-    [...state.entities.values()].filter((item) => item.name.includes(filter)),
+  (state) => [...state.entities.values()].filter((item) => item.name.includes(filter)),
   {
     isEqualRoot: (a, b) => a.entities === b.entities,
     /**
@@ -137,12 +144,9 @@ export const useContacts = createGlobalState({
   selected: Set<number>,
 });
 
-const useContactsArray = useContacts.createSelectorHook(
-  (state) => [...state.entities.values()],
-  {
-    isEqualRoot: (a, b) => a.entities === b.entities,
-  }
-);
+const useContactsArray = useContacts.createSelectorHook((state) => [...state.entities.values()], {
+  isEqualRoot: (a, b) => a.entities === b.entities,
+});
 ```
 
 Now inside your component just call the new hook
@@ -152,39 +156,28 @@ Now inside your component just call the new hook
 ```tsx
 const [filter, setFilter] = useState('');
 
-const [contacts] = useContactsArray(
-  (entities) => entities.name.includes(filter),
-  {
-    dependencies: [filter],
-  }
-);
+const [contacts] = useContactsArray((entities) => entities.name.includes(filter), {
+  dependencies: [filter],
+});
 ```
 
 Or you can create another selectorHook from your **useContactsArray**
 
 ```ts
-const useContactsArray = useContacts.createSelectorHook(
-  (state) => [...state.entities.values()],
-  {
-    isEqualRoot: (a, b) => a.entities === b.entities,
-  }
-);
+const useContactsArray = useContacts.createSelectorHook((state) => [...state.entities.values()], {
+  isEqualRoot: (a, b) => a.entities === b.entities,
+});
 
-const useContactsLength = useContactsArray.createSelectorHook(
-  (entities) => entities.length
-);
+const useContactsLength = useContactsArray.createSelectorHook((entities) => entities.length);
 ```
 
 Or you can create a custom hook
 
 ```tsx
 const useFilteredContacts = (filter: string) => {
-  const [contacts] = useContactsArray(
-    (entities) => entities.name.includes(filter),
-    {
-      dependencies: [filter],
-    }
-  );
+  const [contacts] = useContactsArray((entities) => entities.name.includes(filter), {
+    dependencies: [filter],
+  });
 
   return contacts;
 };
@@ -195,31 +188,28 @@ To summarize
 ```tsx
 const [filter, setFilter] = useState('');
 
-const [contacts] = useContacts(
-  (state) => state.contacts.filter((contact) => contact.name.includes(filter)),
-  {
-    /**
-     * You can use the `isEqualRoot` to validate if the values before the selector are equal.
-     * This validation will run before `isEqual` and if the result is true the selector will not be recomputed.
-     * If the result is true the re-render of the component will be prevented.
-     */
-    isEqualRoot: (r1, r2) => r1.filter === r2.filter,
+const [contacts] = useContacts((state) => state.contacts.filter((contact) => contact.name.includes(filter)), {
+  /**
+   * You can use the `isEqualRoot` to validate if the values before the selector are equal.
+   * This validation will run before `isEqual` and if the result is true the selector will not be recomputed.
+   * If the result is true the re-render of the component will be prevented.
+   */
+  isEqualRoot: (r1, r2) => r1.filter === r2.filter,
 
-    /**
-     * You can use the `isEqual` to validate if the values after the selector are equal.
-     * This validation will run after the selector computed a new value...
-     * and if the result is true it will prevent the re-render of the component.
-     */
-    isEqual: (filter1, filter2) => filter1 === filter2,
+  /**
+   * You can use the `isEqual` to validate if the values after the selector are equal.
+   * This validation will run after the selector computed a new value...
+   * and if the result is true it will prevent the re-render of the component.
+   */
+  isEqual: (filter1, filter2) => filter1 === filter2,
 
-    /**
-     * You can use the `dependencies` array as with regular hooks to to force the recomputation of the selector.
-     * Is important ot mention that changes in the dependencies will not trigger a re-render of the component...
-     * Instead the recomputation of the selector will returned immediately.
-     */
-    dependencies: [filter],
-  }
-);
+  /**
+   * You can use the `dependencies` array as with regular hooks to to force the recomputation of the selector.
+   * Is important ot mention that changes in the dependencies will not trigger a re-render of the component...
+   * Instead the recomputation of the selector will returned immediately.
+   */
+  dependencies: [filter],
+});
 
 return (
   <ul>
@@ -250,13 +240,9 @@ const useFilter = useContacts.createSelectorHook(({ filter }) => filter);
 
 const useContactsArray = useContacts.createSelectorHook(({ items }) => items);
 
-const useContactsLength = useContactsArray.createSelectorHook(
-  (items) => items.length
-);
+const useContactsLength = useContactsArray.createSelectorHook((items) => items.length);
 
-const useIsContactsEmpty = useContactsLength.createSelectorHook(
-  (length) => !length
-);
+const useIsContactsEmpty = useContactsLength.createSelectorHook((length) => !length);
 ```
 
 It can't get any simpler, right? Everything is connected, everything is reactive. Plus, these hooks are strongly typed, so if you're working with **TypeScript**, you'll absolutely love it.
@@ -270,32 +256,30 @@ Is common and often necessary to restrict the manipulation of state to a specifi
 By defining a custom API for the **useContacts**, we can encapsulate and expose only the necessary actions or operations that are allowed to modify the state. This provides a controlled interface for interacting with the state, ensuring that modifications stick to the desired restrictions.
 
 ```ts
-import { createGlobalState } from 'react-native-global-state-hooks';
-
-const initialState = {
-  isLoading: true,
-  filter: '',
-  items: [] as Contact[],
-};
-
-type State = typeof initialState;
+import { createGlobalState } from 'react-native-global-state-hooks/createGlobalState';
 
 export const useContacts = createGlobalState(
-  initialState,
   {
-    // this are the actions available for this state
-    onInit: async ({ setState }: StoreTools<State>) => {
-      // fetch contacts
-    },
+    isLoading: true,
+    filter: '',
+    items: [] as Contact[],
   },
   {
-    setFilter(filter: string) {
-      return ({ setState }: StoreTools<State>) => {
-        setState((state) => ({
-          ...state,
-          filter,
-        }));
-      };
+    callbacks: {
+      onInit: ({ setState }) => {
+        // fetch contacts
+      },
+    },
+    // this are the actions available for this state
+    actions: {
+      setFilter(filter: string) {
+        return ({ setState }) => {
+          setState((state) => ({
+            ...state,
+            filter,
+          }));
+        };
+      },
     },
   }
 );
@@ -334,7 +318,7 @@ It can't get any simpler, right? Everything is connected, everything is reactive
 If you need to access the global state outside of a component or a hook without subscribing to state changes, or even inside a **ClassComponent**, you can use:
 
 ```tsx
-useContacts.stateControls: () => [stateRetriever: StateGetter<State>, stateMutator: Setter<State>|ActionCollectionResult<State>, metadataRetriever: Metadata];
+useContacts.stateControls: () => [stateRetriever, stateMutator, Metadata];
 
 // example:
 const [getContacts, setContacts] = useContacts.stateControls();
@@ -355,18 +339,16 @@ Additionally, to subscribe to state changes, you can pass a callback function as
  * This not only allows you to retrieve the current value of the state...
  * but also enables you to subscribe to any changes in the state or a portion of it
  */
-const removeSubscriptionGroup = contactsRetriever<Subscribe>((subscribe) => {
-  subscribe((state) => {
-    console.log('state changed: ', state);
-  });
-
-  subscribe(
-    (state) => state.isLoading,
-    (isLoading) => {
-      console.log('is loading changed', isLoading);
-    }
-  );
+const unsubscribe1 = contactsRetriever((state) => {
+  console.log('state changed: ', state);
 });
+
+const unsubscribe1 = contactsRetriever(
+  (state) => state.isLoading,
+  (isLoading) => {
+    console.log('is loading changed', isLoading);
+  }
+);
 ```
 
 That's great, isn't it? everything stays synchronized with the original state!!
@@ -380,15 +362,18 @@ Here's an example of adding multiple actions to the state and utilizing one acti
 ```ts
 import { createGlobalState } from 'react-hooks-global-states';
 
-export const useCount = createGlobalState(0, () => ({{
+export const useCount = createGlobalState(0, {
+  actions: {
     log: (currentValue: string) => {
-      return ({ getState }: StoreTools<number>): void => {
+      return ({ getState }): void => {
         console.log(`Current Value: ${getState()}`);
       };
     },
 
     increase(value: number = 1) {
-      return ({ getState, setState, actions }: StoreTools<number>) => {
+      return ({ getState, setState, actions }) => {
+        const [, actions] = useCount.stateControls();
+
         setState((count) => count + value);
 
         actions.log(message);
@@ -396,13 +381,16 @@ export const useCount = createGlobalState(0, () => ({{
     },
 
     decrease(value: number = 1) {
-      return ({ getState, setState, actions }: StoreTools<number>) => {
+      return ({ getState, setState, actions }) => {
+        const [, actions] = useCount.stateControls();
+
         setState((count) => count - value);
 
         actions.log(message);
       };
     },
-  }}));
+  },
+});
 ```
 
 Notice that the **StoreTools** will contain a reference to the generated actions API. From there, you'll be able to access all actions from inside another one... the **StoreTools** is generic and allow your to set an interface for getting the typing on the actions.
@@ -435,7 +423,7 @@ You can execute it immediately to subscribe to the state changes
 const MyComponentInsideTheProvider = () => {
   const [count] = useCounterContext()();
 
-  return <>{count}</>;
+  return <span>{count}</span>;
 };
 ```
 
@@ -446,9 +434,7 @@ const MyComponent = () => {
   // won't re-render if the counter changes
   const [getCount, setCount] = useCounterContext().stateControls();
 
-  return (
-    <button onClick={() => setCount((count) => count + 1)}>Increase</button>
-  );
+  return <button onClick={() => setCount((count) => count + 1)}>Increase</button>;
 };
 ```
 
@@ -472,354 +458,46 @@ const MyComponent = () => {
 **createContext** also allows you to add custom actions to control the manipulation of the state inside the context
 
 ```tsx
-import { createContext } from 'react-global-state-hooks';
-
-type CounterState = {
-  count: number;
-};
-
-const initialState: CounterState = {
-  count: 0,
-};
+import { createContext } from 'react-global-state-hooks/createContext';
 
 export const [useCounterContext, CounterProvider] = createStatefulContext(
-  initialState,
-  () => ({
-    increase: (value: number = 1) => {
-      return ({ setState }: StoreTools<CounterState>) => {
-        setState((state) => ({
-          ...state,
-          count: state.count + value,
-        }));
-      };
-    },
-    decrease: (value: number = 1) => {
-      return ({ setState }: StoreTools<CounterState>) => {
-        setState((state) => ({
-          ...state,
-          count: state.count - value,
-        }));
-      };
-    },
-  })
-);
-```
-
-And just like with regular global hooks, now instead of a setState function, the hook will return the collection of actions
-
-Last but not least, you can still creating **selectorHooks** with the **createSelectorHook** function, this hooks will only work if the if they are contained in the scope of the provider.
-
-```tsx
-const useIsEven = useCounterContext.createSelectorHook(
-  (count) => count % 2 === 0
-);
-```
-
-# Emitters
-
-So, we have seen that we can subscribe a callback to state changes, create **selector hooks** from our global states. Guess what? We can also create derived **emitters** and subscribe callbacks to specific portions of the state. Let's review it:
-
-```ts
-const subscribeToFilter = createDerivateEmitter(
-  contactsRetriever,
-  ({ filter }) => ({
-    filter,
-  })
-);
-```
-
-Cool, it's basically the same, but instead of using the **hook** as a parameter, we just have to use the **stateRetriever** as a parameter, and that will make the magic.
-
-Now we are able to add a callback that will be executed every time the state of the **filter** changes.
-
-```ts
-const removeFilterSubscription = subscribeToFilter<Subscribe>(({ filter }) => {
-  console.log(`The filter value changed: ${filter}`);
-});
-```
-
-By default, the callback will be executed once subscribed, using the current value of the state. If you want to avoid this initial call, you can pass an extra parameter to the **subscribe** function.
-
-```ts
-const removeFilterSubscription = subscribeToFilter<Subscribe>(
-  ({ filter }) => {
-    console.log(`The filter value changed: ${filter}`);
-  },
   {
-    skipFirst: true,
-  }
-);
-```
-
-Also, of course, if you have an exceptional case where you want to derived/selected directly from the current **emitter**, you can add a **selector**. This allows you to fine-tune the emitted values based on your requirements
-
-```ts
-const removeFilterSubscription = subscribeToFilter<Subscribe>(
-  ({ filter }) => filter,
-  /**
-   *  Cause of the selector the filter now is an string
-   */
-  (filter) => {
-    console.log(`The filter value changed: ${filter}`);
+    count: 0,
   },
   {
-    skipFirst: true,
-    /**
-     * You can also override the default shallow comparison...
-     * or disable it completely by setting the isEqual callback to null.
-     */
-    isEqual: (a, b) => a === b,
-    // isEqual: null // this will avoid doing a shallow comparison
+    actions: {
+      increase: (value: number = 1) => {
+        return ({ setState }) => {
+          setState((state) => ({
+            ...state,
+            count: state.count + value,
+          }));
+        };
+      },
+      decrease: (value: number = 1) => {
+        return ({ setState }) => {
+          setState((state) => ({
+            ...state,
+            count: state.count - value,
+          }));
+        };
+      },
+    },
   }
 );
 ```
 
-And guess what again? You can also derive emitters from derived emitters without any trouble at all! It works basically the same. Let's see an example:
-
-```ts
-const subscribeToItems = createDerivateEmitter(
-  contactsRetriever,
-  ({ items }) => items
-);
-
-const subscribeToItemsLength = createDerivateEmitter(
-  subscribeToItems,
-  (items) => items.length
-);
-```
-
-The examples may seem a little silly, but they allow you to see the incredible things you can accomplish with these **derived states** and **emitters**. They open up a world of possibilities!
-
-# Combining stateRetriever
-
-What if you have two states and you want to combine them? You may have already guessed it right? ... you can create combined **emitters** and **hooks** from the hook **stateRetriever**.
-
-By utilizing the approach of combining **emitters** and **hooks**, you can effectively merge multiple states and make them shareable. This allows for better organization and simplifies the management of the combined states. You don't need to refactor everything; you just need to combine the **global state hooks** you already have. Let's see a simple example:
-
-First we are gonna create a couple of **global states**, and extract the **stateRetriever**.
-
-```ts
-const useHook1 = createGlobalState({
-  propA: 1,
-  propB: 2,
-});
-
-const [stateRetriever1, stateMutator1] = useHook1.stateControls();
-
-const useHook2 = createGlobalState({
-  propC: 3,
-  propD: 4,
-});
-
-const [, stateRetriever2] = useHook2.stateControls();
-```
-
-Okay, cool, the first state as **propA, propB** while the second one has **propC, propD**, let's combine them:
-
-```ts
-const [useCombinedHook, combinedStateRetriever] = combineAsyncGetters(
-  {
-    selector: ([state1, state2]) => ({
-      ...state1,
-      ...state2,
-    }),
-  },
-  stateRetriever1,
-  stateRetriever2
-);
-```
-
-Well, that's it! Now you have access to a **combinedStateRetriever** that will return the combined value of the two states. From this new **combinedStateRetriever**, you can retrieve the value or subscribe to its changes. Let'see:
-
-```ts
-const value = stateRetriever(); // { propA, propB, propC, propD }
-
-// subscribe to the new emitter
-const unsubscribeGroup = stateRetriever<Subscribe>((subscribe) => {
-  subscribe((state) => {
-    console.log(subscribe); // full state
-  });
-
-  // Please note that if you add a selector,
-  // the callback will only trigger if the result of the selector changes.
-  subscribe(
-    ({ propA, propD }) => ({ propA, propD }),
-    (derived) => {
-      console.log(derived); // { propA, propD }
-    }
-  );
-});
-```
-
-Regarding the newly created hook, **useCombinedHook**, you can seamlessly utilize it across all your components, just like your other **global state hooks**. This enables a consistent and familiar approach for accessing and managing the combined state within your application.
-
-```ts
-const [combinedState] = useCombinedHook();
-```
-
-The main difference with **combined hooks** compared to individual **global state hooks** is the absence of **metadata** and **actions**. Instead, combined hooks provide a condensed representation of the underlying global states using simple React functionality. This streamlined approach ensures lightweight usage, making it easy to access and manage the combined state within your components.
-
-### Let's explore some additional examples.
-
-Similar to your other **global state hooks**, **combined hooks** allow you to use **selectors** directly from consumer components. This capability eliminates the need to create an excessive number of reusable hooks if they are not truly necessary. By utilizing selectors, you can efficiently extract specific data from the **combined state** and utilize it within your components. This approach offers a more concise and focused way of accessing the required state values without the need for creating additional hooks unnecessarily.
-
-```ts
-const [fragment] = useCombinedHook(({ propA, propD }) => ({ propA, propD }));
-```
-
-Lastly, you have the flexibility to continue combining stateRetrievers if desired. This means you can extend the functionality of combined hooks by adding more stateRetrievers to merge additional states. By combining stateRetrievers in this way, you can create a comprehensive and unified representation of the combined states within your application. This approach allows for modular and scalable state management, enabling you to efficiently handle complex state compositions.
-
-Let's see an example:
-
-```ts
-const [useCombinedHook, combinedStateRetriever1] = combineAsyncGetters(
-  {
-    selector: ([state1, state2]) => ({
-      ...state1,
-      ...state2,
-    }),
-  },
-  stateRetriever1,
-  stateRetriever2
-);
-
-const useHook3 = createGlobalState({
-  propE: 1,
-  propF: 2,
-});
-
-const [stateRetriever3, stateMutator3] = useHook3.stateControls();
-
-const useIsLoading = createGlobalState(false);
-
-const [isLoadingStateRetriever, isLoadingMutator] =
-  useIsLoading.stateControls();
-```
-
-Once we created another peace of state, we can combine it with our other **global hooks** and **emitters**
-
-```ts
-const [useCombinedHook2, combinedStateRetriever2] = combineAsyncGetters(
-  {
-    selector: ([state1, state2, isLoading]) => ({
-      ...state1,
-      ...state2,
-      isLoading,
-    }),
-  },
-  combinedStateRetriever1,
-  stateRetriever3,
-  isLoadingStateRetriever
-);
-```
-
-You have the freedom to combine as many global hooks as you wish. This means you can merge multiple states into a single cohesive unit by combining their respective hooks. This approach offers flexibility and scalability, allowing you to handle complex state compositions in a modular and efficient manner.
-
-### **Quick note**:
-
-Please be aware that the third parameter is a **dispose callback**, which can be particularly useful in **high-order** functions when you want to release any resources associated with the hook. By invoking the dispose callback, the hook will no longer report any changes, ensuring that resources are properly cleaned up. This allows for efficient resource management and can be beneficial in scenarios where you need to handle resource cleanup or termination in a controlled manner.
-
-# Extending Global Hooks
-
-Creating a custom builder for your **global hook** is made incredibly easy with the **createCustomGlobalState** function.
-
-This function returns a new global state builder wrapped with the desired custom implementation, allowing you to get creative! Le'ts see and example:
-
-```ts
-import { formatFromStore, formatToStore, createCustomGlobalState } = 'react-global-state-hooks'
-
-// Optional configuration available for the consumers of the builder
-type HookConfig = {
-  asyncStorageKey?: string;
-};
-
-// This is the base metadata that all the stores created from the builder will have.
-type BaseMetadata = {
-  isAsyncStorageReady?: boolean;
-};
-
-export const createGlobalState = createCustomGlobalState<
-  BaseMetadata,
-  HookConfig
->({
-  /**
-   * This function executes immediately after the global state is created, before the invocations of the hook
-   */
-  onInitialize: async ({ setState, setMetadata }, config) => {
-    setMetadata((metadata) => ({
-      ...(metadata ?? {}),
-      isAsyncStorageReady: null,
-    }));
-
-    const asyncStorageKey = config?.asyncStorageKey;
-    if (!asyncStorageKey) return;
-
-    const storedItem = (await asyncStorage.getItem(asyncStorageKey)) as string;
-
-    // update the metadata, remember, metadata is not reactive
-    setMetadata((metadata) => ({
-      ...metadata,
-      isAsyncStorageReady: true,
-    }));
-
-    if (storedItem === null) {
-      return setState((state) => state, { forceUpdate: true });
-    }
-
-    const parsed = formatFromStore(storedItem, {
-      jsonParse: true,
-    });
-
-    setState(parsed, { forceUpdate: true });
-  },
-
-  onChange: ({ getState }, config) => {
-    if (!config?.asyncStorageKey) return;
-
-    const state = getState();
-
-    const formattedObject = formatToStore(state, {
-      stringify: true,
-    });
-
-    asyncStorage.setItem(config.asyncStorageKey, formattedObject);
-  },
-});
-```
-
-It is important to use **forceUpdate** to force React to re-render our components and obtain the most recent state of the **metadata**. This is especially useful when working with primitive types, as it can be challenging to differentiate between a primitive value that originates from storage and one that does not.
-
-It is worth mentioning that the **onInitialize** function will be executed only once per global state.
-
-You can use to **formatToStore**, and **formatFromStore** to sanitize your data, These methods will help you transform objects into JSON strings and retrieve them back without losing any of the original data types. You will no longer encounter problems when **stringifying** Dates, Maps, Sets, and other complex data types. You could take a look in the API here: [json-storage-formatter](https://www.npmjs.com/package/json-storage-formatter).
-
-Let's see how to create a global state using our new builder:
-
-```ts
-const useTodos = createGlobalState(new Map<string, number>(), {
-  config: {
-    asyncStorageKey: 'todos',
-  },
-});
-```
-
-That's correct! If you add an **asyncStorageKey** to the state configuration, the state will be synchronized with the **asyncStorage**
-
-Let's see how to use this async storage hook into our components:
+And just like with regular global hooks, now instead of a setState function, the hook will return the collection of actions
 
-```ts
-const [todos, setTodos, metadata] = useTodos();
+Last but not least, you can still creating **selectorHooks** with the **createSelectorHook** function, this hooks will only work if the if they are contained in the scope of the provider.
 
-return (<>
-  {metadata.isAsyncStorageReady ? <TodoList todos={todos} /> : <Text>Loading...</Text>}
-<>);
+```tsx
+const useIsEven = useCounterContext.createSelectorHook((count) => count % 2 === 0);
 ```
 
-The **metadata** is not reactive information and can only be modified from inside the global state lifecycle methods.
-
 # Life cycle methods
 
-There are some lifecycle methods available for use with global hooks, let's review them:
+There are some lifecycle methods available for use with global hooks, let's review them callbacks prop:
 
 ```ts
 /**
@@ -861,7 +539,7 @@ onInit?: ({
 /**
 * @description - callback function called every time the state is changed
 */
-onStateChanged?: (parameters: StateChangesParam<TState, TMetadata, TActions>) => void;
+onStateChanged?: (parameters: StoreTools<any, any> & StateChanges<unknown>) => void;
 
 /**
 * callback function called every time a component is subscribed to the store
@@ -871,7 +549,7 @@ onSubscribed?: (parameters: StateConfigCallbackParam<TState, TMetadata, TActions
 /**
 * callback function called every time the state is about to change and it allows you to prevent the state change
 */
-computePreventStateChange?: (parameters: StateChangesParam<TState, TMetadata, TActions>) => boolean;
+computePreventStateChange?: (parameters: StoreTools<any, any> & StateChanges<unknown>) => boolean;
 ```
 
 You can pass this callbacks between on the second parameter of the builders like **createGlobalState**
@@ -883,12 +561,14 @@ const useData = createGlobalState(
     metadata: {
       someExtraInformation: 'someExtraInformation',
     },
-    // onSubscribed: (StateConfigCallbackParam) => {},
-    // onInit // etc
-    computePreventStateChange: ({ state, previousState }) => {
-      const prevent = isEqual(state, previousState);
-
-      return prevent;
+    callbacks: {
+      // onSubscribed: (StateConfigCallbackParam) => {},
+      // onInit // etc
+      computePreventStateChange: ({ state, previousState }) => {
+        const prevent = isEqual(state, previousState);
+
+        return prevent;
+      },
     },
   }
 );
@@ -899,95 +579,7 @@ Finally, if you have a very specific necessity but still want to use the global
 Let's see an example again with the **asyncStorage** custom global hook but with the abstract class.
 
 ```ts
-export class GlobalStore<
-  TState,
-  TMetadata extends {
-    asyncStorageKey?: string;
-    isAsyncStorageReady?: boolean;
-  } | null = null,
-  TStateSetter extends
-    | ActionCollectionConfig<TState, TMetadata>
-    | StateSetter<TState> = StateSetter<TState>
-> extends GlobalStoreAbstract<TState, TMetadata, TStateSetter> {
-  constructor(
-    state: TState,
-    config: GlobalStoreConfig<TState, TMetadata, TStateSetter> = {},
-    actionsConfig: TStateSetter | null = null
-  ) {
-    super(state, config, actionsConfig);
-
-    this.initialize();
-  }
-
-  protected onInitialize = async ({
-    setState,
-    setMetadata,
-    getMetadata,
-    getState,
-  }: StateConfigCallbackParam<TState, TMetadata, TStateSetter>) => {
-    setMetadata({
-      ...(metadata ?? {}),
-      isAsyncStorageReady: null,
-    });
-
-    const metadata = getMetadata();
-    const asyncStorageKey = metadata?.asyncStorageKey;
-
-    if (!asyncStorageKey) return;
-
-    const storedItem = (await asyncStorage.getItem(asyncStorageKey)) as string;
-    setMetadata({
-      ...metadata,
-      isAsyncStorageReady: true,
-    });
-
-    if (storedItem === null) {
-      const state = getState();
-
-      // force the re-render of the subscribed components even if the state is the same
-      return setState(state, { forceUpdate: true });
-    }
-
-    const items = formatFromStore<TState>(storedItem, {
-      jsonParse: true,
-    });
-
-    setState(items, { forceUpdate: true });
-  };
-
-  protected onChange = ({
-    getMetadata,
-    getState,
-  }: StateChangesParam<TState, TMetadata, NonNullable<TStateSetter>>) => {
-    const asyncStorageKey = getMetadata()?.asyncStorageKey;
-
-    if (!asyncStorageKey) return;
-
-    const state = getState();
-
-    const formattedObject = formatToStore(state, {
-      stringify: true,
-    });
-
-    asyncStorage.setItem(asyncStorageKey, formattedObject);
-  };
-}
-```
-
-Then, from an instance of the global store, you will be able to access the hooks.
-
-```ts
-const storage = new GlobalStore(0, {
-  metadata: {
-    asyncStorageKey: 'counter',
-    isAsyncStorageReady: false,
-  },
-});
-
-const [getState, _, getMetadata] = storage.stateControls();
-const useState = storage.getHook();
+extends GlobalStoreAbstract<TState, TMetadata, TStateSetter>
 ```
 
-### **Note**: The GlobalStore class is still available in the package in case you were already extending from it.
-
 # That's it for now!! hope you enjoy coding!!

package/getLocalStorageItem.js

@@ -0,0 +1 @@
+!function(r,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["react-global-state-hooks"]=t():r["react-global-state-hooks"]=t()}(this,(()=>(()=>{var r={129:function(r){r.exports=(()=>{"use strict";var r={333:(r,t,e)=>{function n(r){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},n(r)}function o(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=Array(t);e<t;e++)n[e]=r[e];return n}Object.defineProperty(t,"__esModule",{value:!0}),t.clone=void 0;var i=e(646),u=e(346),a=e(473);t.clone=function(r){var e,l=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).shallow;if((0,a.isPrimitive)(r)||(0,i.isDate)(r))return r;if(Array.isArray(r))return l?function(r){if(Array.isArray(r))return o(r)}(e=r)||function(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}(e)||function(r,t){if(r){if("string"==typeof r)return o(r,t);var e={}.toString.call(r).slice(8,-1);return"Object"===e&&r.constructor&&(e=r.constructor.name),"Map"===e||"Set"===e?Array.from(r):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?o(r,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}():r.map((function(r){return(0,t.clone)(r)}));if(r instanceof Map){var f=Array.from(r.entries());return l?new Map(f):new Map(f.map((function(r){return(0,t.clone)(r)})))}if(r instanceof Set){var c=Array.from(r.values());return l?new Set(c):new Set(c.map((function(r){return(0,t.clone)(r)})))}return r instanceof RegExp?new RegExp(r.toString()):(0,u.isFunction)(r)?l?r:Object.create(r):l?Object.assign({},r):r instanceof Error?new Error(r.message):Object.keys(r).reduce((function(e,o){var i=r[o];return Object.assign(Object.assign({},e),function(r,t,e){return(t=function(r){var t=function(r){if("object"!=n(r)||!r)return r;var t=r[Symbol.toPrimitive];if(void 0!==t){var e=t.call(r,"string");if("object"!=n(e))return e;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(r);return"symbol"==n(t)?t:t+""}(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}({},o,(0,t.clone)(i)))}),{})}},944:(r,t,e)=>{function n(r){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},n(r)}function o(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=Array(t);e<t;e++)n[e]=r[e];return n}Object.defineProperty(t,"__esModule",{value:!0}),t.formatFromStore=void 0;var i=e(333),u=e(346),a=e(473);t.formatFromStore=function(r){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},l=e.jsonParse,f=e.sortKeys;return function(r){var e,i,l;if((0,a.isPrimitive)(r))return r;if("date"===(null==r?void 0:r.$t))return new Date(r.$v);if("map"===(null==r?void 0:r.$t)){var c=(null!==(e=r.$v)&&void 0!==e?e:[]).map((function(r){var e,n,i=(n=2,function(r){if(Array.isArray(r))return r}(e=r)||function(r,t){var e=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=e){var n,o,i,u,a=[],l=!0,f=!1;try{if(i=(e=e.call(r)).next,0===t){if(Object(e)!==e)return;l=!1}else for(;!(l=(n=i.call(e)).done)&&(a.push(n.value),a.length!==t);l=!0);}catch(r){f=!0,o=r}finally{try{if(!l&&null!=e.return&&(u=e.return(),Object(u)!==u))return}finally{if(f)throw o}}return a}}(e,n)||function(r,t){if(r){if("string"==typeof r)return o(r,t);var e={}.toString.call(r).slice(8,-1);return"Object"===e&&r.constructor&&(e=r.constructor.name),"Map"===e||"Set"===e?Array.from(r):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?o(r,t):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),u=i[0],a=i[1];return[u,(0,t.formatFromStore)(a)]}));return new Map(c)}if("set"===(null==r?void 0:r.$t)){var s=null!==(i=r.$v)&&void 0!==i?i:[].map((function(r){return(0,t.formatFromStore)(r)}));return new Set(s)}return"regex"===(null==r?void 0:r.$t)?new RegExp(r.$v):"error"===(null==r?void 0:r.$t)?new Error(r.$v):Array.isArray(r)?r.map((function(r){return(0,t.formatFromStore)(r)})):"function"===(null==r?void 0:r.$t)?Function("(".concat(r.$v,")(...arguments)")):(l=Object.keys(r),f?(0,u.isFunction)(f)?l.sort(f):l.sort((function(r,t){return(null!=r?r:"").localeCompare(t)})):l).reduce((function(e,o){var i,u,a,l=r[o];return Object.assign(Object.assign({},e),(i={},u=o,a=(0,t.formatFromStore)(l),(u=function(r){var t=function(r){if("object"!=n(r)||!r)return r;var t=r[Symbol.toPrimitive];if(void 0!==t){var e=t.call(r,"string");if("object"!=n(e))return e;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(r);return"symbol"==n(t)?t:t+""}(u))in i?Object.defineProperty(i,u,{value:a,enumerable:!0,configurable:!0,writable:!0}):i[u]=a,i))}),{})}(l?JSON.parse(r):(0,i.clone)(r))}},112:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isBoolean=void 0,t.isBoolean=function(r){return"boolean"==typeof r}},646:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isDate=void 0,t.isDate=function(r){return r instanceof Date}},346:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isFunction=void 0,t.isFunction=function(r){return"function"==typeof r||r instanceof Function}},243:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isNil=void 0,t.isNil=function(r){return null==r}},11:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isNumber=void 0,t.isNumber=function(r){return"number"==typeof r}},473:(r,t,e)=>{function n(r){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},n(r)}Object.defineProperty(t,"__esModule",{value:!0}),t.isPrimitive=void 0;var o=e(112),i=e(243),u=e(11),a=e(671);t.isPrimitive=function(r){return(0,i.isNil)(r)||(0,u.isNumber)(r)||(0,o.isBoolean)(r)||(0,a.isString)(r)||"symbol"===n(r)}},671:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isString=void 0,t.isString=function(r){return"string"==typeof r}}},t={};return function e(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return r[n](i,i.exports,e),i.exports}(944)})()}},t={};function e(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return r[n].call(i.exports,i,i.exports,e),i.exports}var n={};return(()=>{"use strict";var r=n;Object.defineProperty(r,"__esModule",{value:!0}),r.getLocalStorageItem=void 0;var t=e(129);r.getLocalStorageItem=function(r){var e=r.key;if(!e)return null;var n="function"==typeof e?e():e,o=localStorage.getItem(n);if(null===o)return null;var i=r.decrypt||r.encrypt?"function"==typeof r.decrypt?r.decrypt(o):atob(o):o;return(0,t.formatFromStore)(i,{jsonParse:!0})}})(),n})()));

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-global-state-hooks",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "This is a package to easily handling global-state across your react components No-redux, No-context.",
   "main": "./bundle.js",
-  "types": "./src/index.d.ts",
+  "types": "./index.d.ts",
   "sideEffects": false,
   "exports": {
     ".": {
@@ -56,6 +56,16 @@
       "require": "./debounce.js",
       "types": "./debounce.d.ts"
     },
+    "./getLocalStorageItem": {
+      "import": "./getLocalStorageItem.js",
+      "require": "./getLocalStorageItem.js",
+      "types": "./getLocalStorageItem.d.ts"
+    },
+    "./setLocalStorageItem": {
+      "import": "./setLocalStorageItem.js",
+      "require": "./setLocalStorageItem.js",
+      "types": "./setLocalStorageItem.d.ts"
+    },
     "./isRecord": {
       "import": "./isRecord.js",
       "require": "./isRecord.js",

package/setLocalStorageItem.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["react-global-state-hooks"]=t():e["react-global-state-hooks"]=t()}(this,(()=>(()=>{var e={75:function(e){e.exports=(()=>{"use strict";var e={333:(e,t,r)=>{function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}Object.defineProperty(t,"__esModule",{value:!0}),t.clone=void 0;var i=r(646),u=r(346),a=r(473);t.clone=function(e){var r,f=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).shallow;if((0,a.isPrimitive)(e)||(0,i.isDate)(e))return e;if(Array.isArray(e))return f?function(e){if(Array.isArray(e))return o(e)}(r=e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||function(e,t){if(e){if("string"==typeof e)return o(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?o(e,t):void 0}}(r)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}():e.map((function(e){return(0,t.clone)(e)}));if(e instanceof Map){var c=Array.from(e.entries());return f?new Map(c):new Map(c.map((function(e){return(0,t.clone)(e)})))}if(e instanceof Set){var s=Array.from(e.values());return f?new Set(s):new Set(s.map((function(e){return(0,t.clone)(e)})))}return e instanceof RegExp?new RegExp(e.toString()):(0,u.isFunction)(e)?f?e:Object.create(e):f?Object.assign({},e):e instanceof Error?new Error(e.message):Object.keys(e).reduce((function(r,o){var i=e[o];return Object.assign(Object.assign({},r),function(e,t,r){return(t=function(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}({},o,(0,t.clone)(i)))}),{})}},112:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isBoolean=void 0,t.isBoolean=function(e){return"boolean"==typeof e}},646:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isDate=void 0,t.isDate=function(e){return e instanceof Date}},346:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isFunction=void 0,t.isFunction=function(e){return"function"==typeof e||e instanceof Function}},243:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isNil=void 0,t.isNil=function(e){return null==e}},11:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isNumber=void 0,t.isNumber=function(e){return"number"==typeof e}},473:(e,t,r)=>{function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.isPrimitive=void 0;var o=r(112),i=r(243),u=r(11),a=r(671);t.isPrimitive=function(e){return(0,i.isNil)(e)||(0,u.isNumber)(e)||(0,o.isBoolean)(e)||(0,a.isString)(e)||"symbol"===n(e)}},43:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isRegex=void 0,t.isRegex=function(e){return e instanceof RegExp}},671:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isString=void 0,t.isString=function(e){return"string"==typeof e}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n](i,i.exports,r),i.exports}var n={};return(()=>{var e=n;function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}Object.defineProperty(e,"__esModule",{value:!0}),e.formatToStore=void 0;var o=r(333),i=r(646),u=r(346),a=r(473),f=r(43);e.formatToStore=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{stringify:!1},n=r.stringify,c=r.validator,s=r.excludeTypes,l=r.excludeKeys,y=r.sortKeys,v=new Set(null!=s?s:[]),p=new Set(null!=l?l:[]),m=v.size||p.size,b=null!=c?c:function(e){var r=e.key,n=e.value;if(!m)return!0;var o=p.has(r),i=v.has(t(n));return!o&&!i},d=function(e){if((0,a.isPrimitive)(e))return e;var r;if(Array.isArray(e))return e.map((function(e){return d(e)}));if(e instanceof Map)return{$t:"map",$v:Array.from(e.entries()).map((function(e){return d(e)}))};if(e instanceof Set)return{$t:"set",$v:Array.from(e.values()).map((function(e){return d(e)}))};if((0,i.isDate)(e))return{$t:"date",$v:e.toISOString()};if((0,f.isRegex)(e))return{$t:"regex",$v:e.toString()};if((0,u.isFunction)(e)){var n;try{n={$t:"function",$v:e.toString()}}catch(e){n={$t:"error",$v:"Error: Could not serialize function"}}return n}return e instanceof Error?{$t:"error",$v:e.message}:(r=Object.keys(e),y?(0,u.isFunction)(y)?r.sort(y):r.sort((function(e,t){return(null!=e?e:"").localeCompare(t)})):r).reduce((function(r,n){var o,i,u,a=e[n],f=d(a);return b({obj:e,key:n,value:f})?Object.assign(Object.assign({},r),(o={},i=n,u=d(a),(i=function(e){var r=function(e){if("object"!=t(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!=t(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==t(r)?r:r+""}(i))in o?Object.defineProperty(o,i,{value:u,enumerable:!0,configurable:!0,writable:!0}):o[i]=u,o)):r}),{})},S=d((0,o.clone)(e));return n?JSON.stringify(S):S}})(),n})()}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n].call(i.exports,i,i.exports,r),i.exports}var n={};return(()=>{"use strict";var e=n;Object.defineProperty(e,"__esModule",{value:!0}),e.setLocalStorageItem=void 0;var t=r(75);e.setLocalStorageItem=function(e,r){var n=r.key;if(n){var o="function"==typeof n?n():n,i=(0,t.formatToStore)(e,{stringify:!0,excludeTypes:["function"]}),u=r.encrypt?"function"==typeof r.encrypt?r.encrypt(i):btoa(i):i;localStorage.setItem(o,u)}}})(),n})()));

package/webpack.config.js

@@ -22,6 +22,8 @@ module.exports = {
     uniqueSymbol: './src/uniqueSymbol.ts',
     useConstantValueRef: './src/useConstantValueRef.ts',
     // extras
+    getLocalStorageItem: './src/getLocalStorageItem.ts',
+    setLocalStorageItem: './src/setLocalStorageItem.ts',
   },
   externals: {
     react: 'react',