react-hooks-global-state - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

CHANGELOG.md

@@ -5,2 +5,6 @@ # Change Log
 
+## [0.0.3] - 2018-11-04
+### Added
+- Reducer support
+
 ## [0.0.2] - 2018-10-30
@@ -7,0 +11,0 @@ ### Changed

package.json

 {
   "name": "react-hooks-global-state",
   "description": "Simple global state for React by Hooks API",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "Daishi Kato",
@@ -24,3 +24,4 @@ "repository": {
     "examples:fetch": "webpack-dev-server --entry ./examples/04_fetch/main.ts --content-base examples/04_fetch",
-    "examples:onmount": "webpack-dev-server --entry ./examples/05_onmount/main.ts --content-base examples/05_onmount"
+    "examples:onmount": "webpack-dev-server --entry ./examples/05_onmount/main.ts --content-base examples/05_onmount",
+    "examples:reducer": "webpack-dev-server --entry ./examples/06_reducer/main.ts --content-base examples/06_reducer"
   },
@@ -59,7 +60,7 @@ "keywords": [
     "react-use": "^3.1.0",
-    "ts-loader": "^5.2.2",
+    "ts-loader": "^5.3.0",
     "tslint": "^5.11.0",
     "tslint-config-airbnb": "^5.11.0",
-    "typescript": "^3.1.3",
-    "webpack": "^4.21.0",
+    "typescript": "^3.1.6",
+    "webpack": "^4.24.0",
     "webpack-cli": "^3.1.2",
@@ -66,0 +67,0 @@ "webpack-dev-server": "^3.1.9"

README.md

 react-hooks-global-state
-==========================
+========================
 
@@ -4,0 +4,0 @@ [![Build Status](https://travis-ci.com/dai-shi/react-hooks-global-state.svg?branch=master)](https://travis-ci.com/dai-shi/react-hooks-global-state)

src/index.d.ts

@@ -5,5 +5,11 @@ export type StateItemUpdater<T> = (f: ((v: T) => T) | T) => void;
 
-export const createGlobalState: <S extends {}>(initialState: S) => {
-  stateItemUpdaters: { [K in keyof S]: StateItemUpdater<S[K]> },
-  stateItemHooks: { [K in keyof S]: StateItemHook<S[K]> },
-};
+export type Reducer<S, A> = (state: S, action: A) => S;
+
+export type CreateGlobalState =
+  <S extends {}, A extends {}>(initialState: S, reducer?: Reducer<S, A>) => {
+    stateItemUpdaters: { [K in keyof S]: StateItemUpdater<S[K]> },
+    stateItemHooks: { [K in keyof S]: StateItemHook<S[K]> },
+    dispatch: (action: A) => void;
+  };
+
+export const createGlobalState: CreateGlobalState;

src/index.js

 import { useState, useEffect } from 'react';
 
+const map = (obj, func) => {
+  const newObj = {};
+  Object.keys(obj).forEach((key) => {
+    newObj[key] = func(obj[key]);
+  });
+  return newObj;
+};
 const isFunction = fn => (typeof fn === 'function');
+const defaultReducer = state => state;
 
-export const createGlobalState = (initialState) => {
-  const globalState = { ...initialState };
-  const stateItemListeners = {};
-  const stateItemUpdaters = {};
-  const stateItemHooks = {};
-  Object.keys(globalState).forEach((name) => {
-    stateItemListeners[name] = [];
-    stateItemUpdaters[name] = (func) => {
-      if (isFunction(func)) {
-        globalState[name] = func(globalState[name]);
-      } else {
-        globalState[name] = func;
+const createStateItem = (initialValue) => {
+  let value = initialValue;
+  const getValue = () => value;
+  const listeners = [];
+  const updater = (funcOrVal) => {
+    if (isFunction(funcOrVal)) {
+      value = funcOrVal(value);
+    } else {
+      value = funcOrVal;
+    }
+    listeners.forEach(f => f(value));
+  };
+  const hook = () => {
+    const [val, setVal] = useState(value);
+    useEffect(() => {
+      listeners.push(setVal);
+      const cleanup = () => {
+        const index = listeners.indexOf(setVal);
+        listeners.splice(index, 1);
+      };
+      return cleanup;
+    }, []);
+    return [val, updater];
+  };
+  return { getValue, updater, hook };
+};
+
+const createDispatch = (stateItemMap, reducer) => {
+  const dispatch = (action) => {
+    const oldState = {};
+    Object.keys(stateItemMap).forEach((name) => {
+      oldState[name] = stateItemMap[name].getValue();
+    });
+    const newState = reducer(oldState, action);
+    Object.keys(oldState).forEach((name) => {
+      if (oldState[name] !== newState[name]) {
+        stateItemMap[name].updater(newState[name]);
       }
-      stateItemListeners[name].forEach(f => f(globalState[name]));
-    };
-    stateItemHooks[name] = () => {
-      const [value, setValue] = useState(globalState[name]);
-      useEffect(() => {
-        stateItemListeners[name].push(setValue);
-        const cleanup = () => {
-          const index = stateItemListeners[name].indexOf(setValue);
-          stateItemListeners[name].splice(index, 1);
-        };
-        return cleanup;
-      }, []);
-      return [value, stateItemUpdaters[name]];
-    };
-  });
-  Object.freeze(stateItemUpdaters);
-  Object.freeze(stateItemHooks);
-  return { stateItemUpdaters, stateItemHooks };
+    });
+  };
+  return dispatch;
 };
+
+export const createGlobalState = (initialState, reducer = defaultReducer) => {
+  const stateItemMap = map(initialState, createStateItem);
+  return {
+    stateItemUpdaters: Object.freeze(map(stateItemMap, x => x.updater)),
+    stateItemHooks: Object.freeze(map(stateItemMap, x => x.hook)),
+    dispatch: createDispatch(stateItemMap, reducer),
+  };
+};

No alert changes

Improved metrics

Total package byte prevSize

29607

increased by17.35%

Number of package files

48

increased by14.29%

Lines of code

783

increased by28.15%

No dependency changes