resolves #90

resolves #85

Author: quisido

README.md

@@ -51,6 +51,11 @@ reducer is the ReactN global state object.
 You use `dispatch = useDispatch(reducerName)` to use a reducer that was added
 by the `addReducer` helper function.
 
+You use `dispatch = useDispatch(reducerFunction, property)` or
+`[ value, dispatch ] = useDispatch(reducerFunction, property)` to apply a
+reducer specifically to a global state property. This is very similar to
+React's native `useReducer` functionality.
+
 #### Class Components
 
 Global state in class components behaves exactly like local state!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactn",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "author": "Charles Stover <[email protected]>",
   "description": "React, but with built-in global state management.",
   "homepage": "https://github.com/CharlesStover/reactn#readme",
@@ -50,5 +50,10 @@
     "ts-jest": "^24.0.1",
     "ts-node": "^8.0.2",
     "typescript": "^3.3.1"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.8.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   }
 }

src/create-provider.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { Reducers, State } from '../default';
 import Callback from '../types/callback';
-import Dispatcher, { ExtractArguments } from '../types/dispatcher';
+import Dispatcher, {
+  ExtractArguments,
+  PropertyDispatcher,
+} from '../types/dispatcher';
 import Dispatchers from '../types/dispatchers';
 import NewGlobalState from '../types/new-global-state';
 import ReactNProvider from '../types/provider';
@@ -97,23 +100,23 @@ export default function _createProvider<
     public static useDispatch<A extends any[] = any[]>(
       reducer: Reducer<G, R, A>,
     ): Dispatcher<G, A>;
-    public static useDispatch<A extends any[] = any[], P extends keyof G = keyof G>(
-      reducer: PropertyReducer<G, A, P>,
+    public static useDispatch<P extends keyof G = keyof G, A extends any[] = any[]>(
+      reducer: PropertyReducer<G, P, A>,
       property: P,
-    ): Dispatcher<G, A>;
+    ): PropertyDispatcher<G, P, A>;
     public static useDispatch<K extends keyof R = keyof R>(
       reducer: K,
     ): Dispatcher<G, ExtractArguments<R[K]>>;
-    public static useDispatch<K extends keyof R = keyof R, A extends any[] = any[], P extends keyof G = keyof G>(
-      reducer?: K | Reducer<G, R, A> | PropertyReducer<G, A, P>,
+    public static useDispatch<P extends keyof G = keyof G, K extends keyof R = keyof R, A extends any[] = any[]>(
+      reducer?: K | Reducer<G, R, A> | PropertyReducer<G, P, A>,
       property?: P,
-    ): UseDispatch<G, R, K, A> {
+    ): UseDispatch<G, R, P, K, A> {
 
       // TypeScript required these synonymous function calls be separate.
       // Each call has its own generics, pleasing the TypeScript overlord.
       if (typeof reducer === 'function') {
         if (isPropertyReducer(reducer, property)) {
-          return useDispatch<G, R, A, P>(
+          return useDispatch<G, R, P, A>(
             globalStateManager,
             reducer,
             property,

src/global-state-manager.ts

@@ -263,7 +263,9 @@ export default class GlobalStateManager<
 
     // Remove this property listener from the global state.
     for (const propertyListeners of this.propertyListeners.values()) {
-      removed = removed || propertyListeners.delete(propertyListener);
+      if (propertyListeners.delete(propertyListener)) {
+        removed = true;
+      }
     }
 
     return removed;

src/use-dispatch.ts

@@ -1,6 +1,10 @@
 import { useContext } from 'react';
+import useForceUpdate from 'use-force-update';
 import { Reducers, State } from '../default';
-import Dispatcher, { ExtractArguments } from '../types/dispatcher';
+import Dispatcher, {
+  ExtractArguments,
+  PropertyDispatcher,
+} from '../types/dispatcher';
 import Dispatchers from '../types/dispatchers';
 import Reducer, { PropertyReducer } from '../types/reducer';
 import Context from './context';
@@ -14,9 +18,16 @@ import REACT_HOOKS_ERROR from './utils/react-hooks-error';
 export type UseDispatch<
   G extends {} = State,
   R extends {} = Reducers,
+  P extends keyof G = keyof G,
   K extends keyof R = keyof R,
-  A extends any[] = any[]
-> = Dispatcher<G, A> | Dispatcher<G, ExtractArguments<R[K]>> | Dispatchers<G, R>;
+  A extends any[] = any[],
+> =
+  | Dispatcher<G, A>
+  | Dispatcher<G, ExtractArguments<R[K]>>
+  | Dispatchers<G, R>
+  | PropertyDispatcher<G, P, A>;
+
+type VoidFunction = () => void;
 
 
 
@@ -42,13 +53,13 @@ export default function _useDispatch<
 export default function _useDispatch<
   G extends {} = State,
   R extends {} = Reducers,
-  A extends any[] = any[],
   P extends keyof G = keyof G,
+  A extends any[] = any[],
 >(
   overrideGlobalStateManager: GlobalStateManager<G, R> | null,
-  reducer: PropertyReducer<G, A, P>,
+  reducer: PropertyReducer<G, P, A>,
   property: P,
-): Dispatcher<G, A>;
+): PropertyDispatcher<G, P, A>;
 
 // useDispatch('name')
 export default function _useDispatch<
@@ -78,20 +89,22 @@ export default function _useDispatch<
 export default function _useDispatch<
   G extends {} = State,
   R extends {} = Reducers,
+  P extends keyof G = keyof G,
   K extends keyof R = keyof R,
   A extends any[] = any[],
-  P extends keyof G = keyof G,
 >(
   overrideGlobalStateManager: GlobalStateManager<G, R> | null,
-  reducer?: K | Reducer<G, R, A> | PropertyReducer<G, A, P>,
+  reducer?: K | Reducer<G, R, A> | PropertyReducer<G, P, A>,
   property?: P,
-): UseDispatch<G, R, K, A> {
+): UseDispatch<G, R, P, K, A> {
 
   // Require hooks.
   if (!useContext) {
     throw REACT_HOOKS_ERROR;
   }
 
+  const forceUpdate: VoidFunction = useForceUpdate();
+
   // Get the global state manager.
   const globalStateManager: GlobalStateManager<G, R> =
     overrideGlobalStateManager ||
@@ -109,6 +122,8 @@ export default function _useDispatch<
     // If this reducer mutates a specific property, create a dispatcher that
     //   targets that property.
     if (isPropertyReducer(reducer, property)) {
+
+      // Create a middleware reducer specifically for handling this property.
       const newReducer: Reducer<G, R, A, Partial<G>> = (
         global: G,
         _dispatch: Dispatchers<G, R>,
@@ -118,7 +133,70 @@ export default function _useDispatch<
         newGlobalState[property] = reducer(global[property], ...args);
         return newGlobalState;
       };
-      return globalStateManager.createDispatcher(newReducer);
+
+      // Pre-emptively set dispatcher to type PropertyDispatcher so that we can
+      //   add the tuple to it.
+      const propertyDispatcher: PropertyDispatcher<G, P, A> =
+        (
+          globalStateManager.createDispatcher(newReducer, reducer.name)
+        ) as PropertyDispatcher<G, P, A>;
+
+      // [0] is the property value, with subscription.
+      Object.defineProperty(propertyDispatcher, 0, {
+        configurable: true,
+        enumerable: true,
+        get(): G[P] {
+          globalStateManager.addPropertyListener(property, forceUpdate);
+          return globalStateManager.state[property];
+        },
+      });
+
+      // [1] is the dispatcher itself.
+      propertyDispatcher[1] = propertyDispatcher;
+
+      // Iterators must have a slice method.
+      const propertyDispatcherSlice = (
+        start?: number,
+        end?: number
+      ): (G[P] | Dispatcher<G, A>)[] => {
+        const values: (G[P] | Dispatcher<G, A>)[] =
+          [ propertyDispatcher[0], propertyDispatcher[1] ];
+        return values.slice.apply(values, [ start, end ]);
+      };
+      propertyDispatcher.slice = propertyDispatcherSlice;
+
+      // Iterators must have a Symbol.iterator property.
+      const propertyDispatcherIterator =
+        (): IterableIterator<G[P] | Dispatcher<G, A>> => {
+          let index: number = 0;
+          const propertyDispatcherIteratorNext =
+            (): IteratorResult<Dispatcher<G, A> | G[P]> => {
+
+              // IteratorResult
+              if (index < 2) {
+                return {
+                  done: false,
+                  value: propertyDispatcher[index++],
+                };
+              }
+
+              // Done.
+              index = 0;
+              return {
+                done: true,
+                value: undefined,
+              };
+            };
+
+          // IterableIterator
+          return {
+            [Symbol.iterator]: propertyDispatcher[Symbol.iterator],
+            next: propertyDispatcherIteratorNext,
+          };
+        };
+      propertyDispatcher[Symbol.iterator] = propertyDispatcherIterator;
+
+      return propertyDispatcher;
     }
 
     // If this reducer does not mutate a specific property, create it as is.

src/utils/component-will-unmount.ts

@@ -4,11 +4,12 @@ import { ReactNComponentWillUnmount } from '../methods';
 
 
 
-type VoidFunction = () => void;
+// type VoidFunction = () => void;
 
 
 
 // this.componentWillUnmount on instance
+/*
 export const componentWillUnmountInstance = <
   P extends {} = {},
   S extends {} = {},
@@ -28,6 +29,7 @@ export const componentWillUnmountInstance = <
   }
   return false;
 };
+*/
 
 // this.componentWillUnmount on prototype
 export const componentWillUnmountPrototype = <
@@ -43,6 +45,7 @@ export const componentWillUnmountPrototype = <
     Object.getPrototypeOf(that);
   if (Object.prototype.hasOwnProperty.call(proto, 'componentWillUnmount')) {
     that.componentWillUnmount = (): void => {
+      console.log('ReactN component unmounting.');
       ReactNComponentWillUnmount(that);
       proto.componentWillUnmount.bind(that)();
     };

src/utils/component-will-update.ts

@@ -4,12 +4,15 @@ import { ReactNComponentWillUpdate } from '../methods';
 
 
 
+/*
 type ComponentWillUpdate<P extends {} = {}, S extends {} = {}> =
   (nextProps: P, nextState: S, context: any) => void;
+*/
 
 
 
 // this.componentWillUpdate on instance
+/*
 export const componentWillUpdateInstance = <
   P extends {} = {},
   S extends {} = {},
@@ -29,6 +32,7 @@ export const componentWillUpdateInstance = <
   }
   return false;
 };
+*/
 
 // this.componentWillUpdate on prototype
 export const componentWillUpdatePrototype = <

src/utils/is-property-reducer.ts

@@ -6,11 +6,11 @@ import Reducer, { PropertyReducer } from '../../types/reducer';
 export default function isPropertyReducer<
   G extends {} = State,
   R extends {} = Reducers,
-  A extends any[] = any[],
   P extends keyof G = keyof G,
+  A extends any[] = any[],
 >(
-  _reducer: Reducer<G, R, A> | PropertyReducer<G, A, P>,
+  _reducer: Reducer<G, R, A> | PropertyReducer<G, P, A>,
   property?: keyof G,
-): _reducer is PropertyReducer<G, A, P> {
+): _reducer is PropertyReducer<G, P, A> {
   return typeof property !== 'undefined';
 };

tests/global-state-manager/remove-property-listener.test.ts

@@ -4,6 +4,9 @@ import { G, INITIAL_STATE } from '../utils/initial';
 
 
 const PROPERTY: keyof G = 'x';
+
+const PROPERTY2: keyof G = 'y';
+
 const PROPERTY_LISTENER = (): void => { };
 
 
@@ -22,8 +25,18 @@ describe('GlobalStateManager.removePropertyListener', (): void => {
     expect(globalStateManager.removePropertyListener).toHaveLength(1);
   });
 
-  it('remove a property listener', (): void => {
+  it('should remove a property listener', (): void => {
+    globalStateManager.addPropertyListener(PROPERTY, PROPERTY_LISTENER);
+    expect(globalStateManager.hasPropertyListener(PROPERTY_LISTENER))
+      .toBe(true);
+    globalStateManager.removePropertyListener(PROPERTY_LISTENER);
+    expect(globalStateManager.hasPropertyListener(PROPERTY_LISTENER))
+      .toBe(false);
+  });
+
+  it('should remove more than 1 property listener', (): void => {
     globalStateManager.addPropertyListener(PROPERTY, PROPERTY_LISTENER);
+    globalStateManager.addPropertyListener(PROPERTY2, PROPERTY_LISTENER);
     expect(globalStateManager.hasPropertyListener(PROPERTY_LISTENER))
       .toBe(true);
     globalStateManager.removePropertyListener(PROPERTY_LISTENER);