Feature/stores

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cobuildlab/react-simple-state",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Simple and Lightweight state management for react applications. ",
   "main": "lib/index.js",
   "types": "./lib/index.d.ts",
@@ -39,15 +39,23 @@
     "jest": "^26.0.1",
     "lint-staged": "^10.2.2",
     "prettier": "^2.0.5",
-    "react": "^16.13.1",
+    "react": "17.0.2",
     "react-test-renderer": "^16.13.1",
     "ts-jest": "^25.5.1",
     "typedoc": "^0.17.8",
     "typedoc-plugin-markdown": "^2.3.1",
-    "typescript": "^4.2.2"
+    "typescript": "^4.4.2"
   },
   "peerDependencies": {
-    "react": "^16.8.6"
+    "react": ">=16.13.1"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "husky": {
     "hooks": {

src/actions.ts

@@ -20,8 +20,10 @@ export function createAction<T, U extends any[], E = Error, R = unknown>(
     try {
       data = await action(...params);
     } catch (error) {
-      errorEvent.dispatch(error);
-      return { error };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      errorEvent.dispatch(error as any);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return { error } as { error: any };
     }
 
     event.dispatch(data);

src/pub-sub.ts

@@ -6,13 +6,23 @@ export interface Subscriber<T> {
   update: (value: T | null) => void;
 }
 
+export interface SubscriberV2<T> {
+  update: (value: T) => void;
+}
 export interface Publisher<T> {
   subscribers: Subscriber<T>[];
 
   subscribe(subscriber: Subscriber<T>): Subscription;
 
   notify(value: T | null): void;
 }
+export interface PublisherV2<T> {
+  subscribers: SubscriberV2<T>[];
+
+  subscribe(subscriber: SubscriberV2<T>): Subscription;
+
+  notify(value: T): void;
+}
 
 /**
  * An Object that represent the subscription to a Publisher.
@@ -38,6 +48,27 @@ class ConcreteSubscription<T> implements Subscription {
   }
 }
 
+class ConcreteSubscriptionV2<T> implements Subscription {
+  private readonly publisher: PublisherV2<T> | null = null;
+  private readonly subscriber: SubscriberV2<T> | null = null;
+
+  constructor(publisher: PublisherV2<T>, subscriber: SubscriberV2<T>) {
+    this.publisher = publisher;
+    this.subscriber = subscriber;
+  }
+
+  unsubscribe(): void {
+    if (this.publisher === null || this.subscriber === null)
+      throw new Error('ConcreteSubscription: Invalid state');
+
+    const observerIndex = this.publisher.subscribers.indexOf(this.subscriber);
+    if (observerIndex === -1) {
+      return console.log('ConcreteSubscription: Nonexistent subscriber.');
+    }
+    this.publisher.subscribers.splice(observerIndex, 1);
+  }
+}
+
 /**
  * A simple publisher.
  */
@@ -60,4 +91,31 @@ class ConcretePublisher<T> implements Publisher<T> {
   }
 }
 
-export { ConcretePublisher, ConcreteSubscription };
+/**
+ * A simple publisher.
+ */
+class ConcretePublisherV2<T> implements PublisherV2<T> {
+  public subscribers: SubscriberV2<T>[] = [];
+
+  public subscribe(subscriber: SubscriberV2<T>): Subscription {
+    const isExist = this.subscribers.includes(subscriber);
+    if (isExist) {
+      throw new Error('Publisher: Subscriber has been subscribed already.');
+    }
+    this.subscribers.push(subscriber);
+    return new ConcreteSubscriptionV2(this, subscriber);
+  }
+
+  public notify(value: T): void {
+    for (const subscriber of this.subscribers) {
+      subscriber.update(value);
+    }
+  }
+}
+
+export {
+  ConcretePublisher,
+  ConcreteSubscription,
+  ConcreteSubscriptionV2,
+  ConcretePublisherV2,
+};

src/store-hooks.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react';
+import { Store } from './store';
+
+/**
+ * @param {Store} store  - Store to subscribe.
+ * @param {Function} callback - Function to call on each dipatch.
+ * @param {Function} errorcCallback - Function to call on each error dipatch.
+ */
+export function useStoreSub<T>(
+  store: Store<T>,
+  callback: ((data: T) => void) | undefined = undefined,
+  errorcCallback: ((data: Error) => void) | undefined = undefined,
+): void {
+  const callbacksRef = useRef({
+    callback,
+    errorcCallback,
+  });
+
+  callbacksRef.current = {
+    callback,
+    errorcCallback,
+  };
+
+  useEffect(() => {
+    const unsubscribeSuccess = store.subscribe((data) => {
+      if (callbacksRef.current.callback) {
+        callbacksRef.current.callback(data);
+      }
+    });
+
+    const unsubscribeError = store.subscribeError((data) => {
+      if (callbacksRef.current.errorcCallback) {
+        callbacksRef.current.errorcCallback(data);
+      }
+    });
+
+    return () => {
+      unsubscribeSuccess.unsubscribe();
+      unsubscribeError.unsubscribe();
+    };
+  }, [store]);
+}
+
+/**
+ * @param {Store} store - Store to subscribe.
+ * @returns {Object} - Resulto object from the store.
+ */
+export function useStore<T>(store: Store<T>): T {
+  const [state, setState] = useState(store.get());
+
+  useStoreSub(store, (data) => {
+    setState(data);
+  });
+
+  return state;
+}

src/store-utils.ts

@@ -0,0 +1,34 @@
+import { CheckDispatchType, Store } from './store';
+
+/**
+ * @param {Store} store - Event.
+ * @param {Function} callback - Callback.
+ * @param {Function} sideEffect - Callback.
+ * @returns {Function} Reducer fucntion.
+ */
+export function createStoreAction<T, V extends unknown[], U = unknown>(
+  store: Store<T, U>,
+  callback:
+    | ((prevState: T, ...params: V) => CheckDispatchType<T, U>)
+    | ((prevState: T, ...params: V) => Promise<CheckDispatchType<T, U>>),
+  sideEffect?: (...params: V) => void,
+) {
+  return (...params: V): void => {
+    if (sideEffect) {
+      sideEffect(...params);
+    }
+    const result = callback(store.get(), ...params);
+
+    if (result instanceof Promise) {
+      result
+        .then((data) => {
+          store.dispatch(data);
+        })
+        .catch((e) => {
+          store.dispatchError(e);
+        });
+      return;
+    }
+    store.dispatch(result);
+  };
+}