feat(overmind): add reactions

Author: christianalfoni

packages/node_modules/overmind/src/index.ts

@@ -3,14 +3,16 @@ import { EventEmitter } from 'betsy'
 import ProxyStateTree from 'proxy-state-tree'
 import Devtools, { Message, safeValue } from './Devtools'
 import Action, { IValueAction, INoValueAction } from './Action'
+import Reaction, { ReactionConfig } from './reaction'
 export { default as namespaces, Namespace } from './namespaces'
 export { default as derived } from './derived'
 export { default as computed } from './computed'
 
-type Configuration<State, Providers, Actions> = {
+type Configuration<State, Providers, Actions, Reactions> = {
   state?: State
   providers?: Providers
   actions?: Actions
+  reactions?: Reactions
 }
 
 type Options = {
@@ -33,12 +35,32 @@ export interface Events {
     cacheKeysCount: number
     cacheKeyIndex: number
   }
+  'reaction:add': {
+    path: string
+    statePath: string
+    updateCount: number
+  }
+  'reaction:update': {
+    path: string
+    statePath: string
+    updateCount: number
+  }
+  'reaction:remove': {
+    path: string
+    statePath: string
+    updateCount: number
+  }
 }
 
 export type ActionsCallback<Providers, State> = (
   action: IAction<State, Providers & { state: State }>
 ) => any
 
+export type ReactionsCallback<State, Providers> = (
+  reaction: ReactionConfig<State, Providers>,
+  action: IAction<State, Providers & { state: State }>
+) => any
+
 export type TContext<State, Providers = {}> = Providers & {
   state: State
 }
@@ -52,31 +74,49 @@ export interface IAction<State, Context> {
 export default class App<
   State extends object,
   Providers extends object,
+  Reactions extends
+    | ReactionsCallback<State, Providers>
+    | {
+        [namespace: string]: ReactionsCallback<State, any>
+      },
   Actions extends
+    | ActionsCallback<Providers, State>
     | {
         [namespace: string]: ActionsCallback<{}, {}>
       }
-    | ActionsCallback<Providers, State>
 > {
   private proxyStateTree: ProxyStateTree
+  private eventHub: EventEmitter<Events>
   devtools: Devtools
-  actions: Actions extends {
-    [namespace: string]: ActionsCallback<{}, {}>
-  }
-    ? { [Namespace in keyof Actions]: ReturnType<Actions[Namespace]> }
-    : Actions extends ActionsCallback<Providers, State>
-      ? ReturnType<Actions>
+  actions: Actions extends ActionsCallback<Providers, State>
+    ? ReturnType<Actions>
+    : Actions extends {
+        [namespace: string]: ActionsCallback<{}, {}>
+      }
+      ? { [Namespace in keyof Actions]: ReturnType<Actions[Namespace]> }
       : any
   state: State
   constructor(
-    configuration: Configuration<State, Providers, Actions>,
+    configuration: Configuration<State, Providers, Actions, Reactions>,
     options: Options = {}
   ) {
+    /*
+      Set up an eventHub to trigger information from derived, computed and reactions
+    */
     const eventHub = new EventEmitter<Events>()
+
+    /*
+      Create the proxy state tree instance with the state and a wrapper to expose
+      the eventHub
+    */
     const proxyStateTree = new ProxyStateTree(configuration.state || {}, {
       dynamicWrapper: (proxyStateTree, path, func) =>
         func(eventHub, proxyStateTree, path),
     })
+
+    /*
+      The action chain with the context configuration
+    */
     const actionChain = new ActionChain(
       Object.assign(
         {
@@ -88,12 +128,30 @@ export default class App<
         providerExceptions: ['state'],
       }
     )
+
+    /*
+      The action factory function
+    */
     const action = function<InitialValue>(): [InitialValue] extends [void]
       ? INoValueAction<State, Providers & { state: State }, InitialValue>
       : IValueAction<State, Providers & { state: State }, InitialValue> {
       return new Action(proxyStateTree, actionChain) as any
     }
 
+    if (options.devtools && typeof window !== 'undefined') {
+      this.initializeDevtools(
+        options.devtools,
+        actionChain,
+        eventHub,
+        proxyStateTree
+      )
+    }
+
+    this.initializeReactions(configuration, eventHub, proxyStateTree, action)
+
+    /*
+      Identify when the state tree should flush out changes
+    */
     actionChain.on('operator:async', () => {
       if (this.devtools) {
         this.devtools.send({
@@ -113,29 +171,16 @@ export default class App<
       proxyStateTree.flush()
     })
 
+    /*
+      Expose the created actions
+    */
+    this.actions = this.getActions(configuration, action)
+
     this.state = proxyStateTree.get()
-    this.actions =
-      typeof configuration.actions === 'function'
-        ? (configuration.actions as ActionsCallback<Providers, State>)(
-            action as IAction<State, Providers & { state: State }>
-          )
-        : (Object.keys(configuration.actions || {}).reduce(
-            (aggr, namespace) =>
-              Object.assign(aggr, {
-                [namespace]: configuration.actions[namespace](action as IAction<
-                  State,
-                  Providers & { state: State }
-                >),
-              }),
-            {}
-          ) as any)
     this.proxyStateTree = proxyStateTree
-
-    if (options.devtools && typeof window !== 'undefined') {
-      this.initializeDevtools(options.devtools, actionChain, eventHub)
-    }
+    this.eventHub = eventHub
   }
-  private initializeDevtools(host, actionChain, eventHub) {
+  private initializeDevtools(host, actionChain, eventHub, proxyStateTree) {
     const devtools = new Devtools()
     devtools.connect(
       host,
@@ -146,7 +191,7 @@ export default class App<
     devtools.send({
       type: 'init',
       data: {
-        state: this.proxyStateTree.get(),
+        state: proxyStateTree.get(),
       },
     })
     actionChain.on('action:start', (data) =>
@@ -200,8 +245,87 @@ export default class App<
         data,
       })
     )
+    eventHub.on('reaction:add', (data) =>
+      devtools.send({
+        type: 'reaction:add',
+        data,
+      })
+    )
+    eventHub.on('reaction:update', (data) =>
+      devtools.send({
+        type: 'reaction:update',
+        data,
+      })
+    )
+    eventHub.on('reaction:remove', (data) =>
+      devtools.send({
+        type: 'reaction:remove',
+        data,
+      })
+    )
     this.devtools = devtools
   }
+  private initializeReactions(configuration, eventHub, proxyStateTree, action) {
+    if (typeof configuration.reactions === 'function') {
+      const reactions = (configuration.reactions as any)(
+        (stateCb, action) => [stateCb, action],
+        action
+      )
+      Object.keys(reactions).forEach((key) => {
+        const reaction = new Reaction(eventHub, proxyStateTree, key)
+        reaction.create(reactions[key][0], reactions[key][1])
+      })
+    } else {
+      const reactions = Object.keys(configuration.reactions || {}).reduce(
+        (aggr, namespace) =>
+          Object.assign(
+            aggr,
+            configuration.reactions[namespace]
+              ? {
+                  [namespace]: (configuration.reactions[namespace] as any)(
+                    (stateCb, action) => [stateCb, action],
+                    action
+                  ),
+                }
+              : {}
+          ),
+        {}
+      )
+      Object.keys(reactions).forEach((namespace) => {
+        Object.keys(reactions[namespace]).forEach((key) => {
+          const reaction = new Reaction(
+            eventHub,
+            proxyStateTree,
+            namespace + '.' + key
+          )
+          reaction.create(
+            reactions[namespace][key][0],
+            reactions[namespace][key][1]
+          )
+        })
+      })
+    }
+  }
+  private getActions(configuration, action) {
+    return typeof configuration.actions === 'function'
+      ? (configuration.actions as ActionsCallback<Providers, State>)(
+          action as IAction<State, Providers & { state: State }>
+        )
+      : (Object.keys(configuration.actions || {}).reduce(
+          (aggr, namespace) =>
+            Object.assign(
+              aggr,
+              configuration.actions[namespace]
+                ? {
+                    [namespace]: configuration.actions[namespace](
+                      action as IAction<State, Providers & { state: State }>
+                    ),
+                  }
+                : {}
+            ),
+          {}
+        ) as any)
+  }
   trackState() {
     return this.proxyStateTree.startPathsTracking()
   }
@@ -211,4 +335,24 @@ export default class App<
   addMutationListener(paths, cb) {
     return this.proxyStateTree.addMutationListener(paths, cb)
   }
+  createReactionFactory() {
+    const reactions = []
+    const instance = this
+    return {
+      add(name: string, stateCb: (state: State) => any, cb: Function) {
+        const reaction = new Reaction(
+          instance.eventHub,
+          instance.proxyStateTree,
+          'view.' + name
+        )
+        reaction.create(stateCb, cb)
+
+        reactions.push(reaction)
+      },
+      dispose() {
+        reactions.forEach((reaction) => reaction.destroy())
+        reactions.length = 0
+      },
+    }
+  }
 }

packages/node_modules/overmind/src/namespaces.ts

@@ -4,6 +4,7 @@ type Module = {
   state?: any
   providers?: any
   actions?: any
+  reactions?: any
 }
 
 type ModuleFunction = (namespace: string) => Module
@@ -36,6 +37,13 @@ export default function namespaces<Namespaces extends TNamespaces>(
         ? Namespaces[Namespace]['actions']
         : any
   }
+  reactions: {
+    [Namespace in keyof Namespaces]: Namespaces[Namespace] extends ModuleFunction
+      ? ReturnType<Namespaces[Namespace]>['reactions']
+      : Namespaces[Namespace] extends Module
+        ? Namespaces[Namespace]['reactions']
+        : any
+  }
 } {
   return Object.keys(namespaces).reduce(
     (aggr, key) => {
@@ -55,14 +63,19 @@ export default function namespaces<Namespaces extends TNamespaces>(
         },
         actions: {
           ...aggr.actions,
-          [key]: namespace.actions || {},
+          [key]: namespace.actions,
+        },
+        reactions: {
+          ...aggr.reactions,
+          [key]: namespace.reactions,
         },
       })
     },
     {
       state: {},
       providers: {},
       actions: {},
+      reactions: {},
     }
   )
 }

packages/node_modules/overmind/src/reaction.test.ts

@@ -0,0 +1,50 @@
+import App from './'
+
+describe('Reaction', () => {
+  test('should instantiate app with reactions', () => {
+    let hasRunReaction = false
+    const app = new App({
+      state: {
+        foo: 'bar',
+      },
+      actions: (action) => ({
+        foo: action().mutation((_, state) => (state.foo = 'bar2')),
+      }),
+      reactions: (reaction, action) => ({
+        foo: reaction(
+          (state) => state.foo,
+          action().do(() => {
+            hasRunReaction = true
+          })
+        ),
+      }),
+    })
+    app.actions.foo()
+    expect(hasRunReaction).toBe(true)
+  })
+  test('should react to nested changes', () => {
+    let hasRunReaction = false
+    const app = new App({
+      state: {
+        foo: [
+          {
+            completed: false,
+          },
+        ],
+      },
+      actions: (action) => ({
+        foo: action().mutation((_, state) => (state.foo[0].completed = true)),
+      }),
+      reactions: (reaction, action) => ({
+        foo: reaction(
+          (state) => state.foo,
+          action().do(() => {
+            hasRunReaction = true
+          })
+        ),
+      }),
+    })
+    app.actions.foo()
+    expect(hasRunReaction).toBe(true)
+  })
+})