feat(overmind): add reaction

Author: christianalfoni

packages/node_modules/overmind/src/index.ts

@@ -10,6 +10,7 @@ import {
   VALUE,
   ITrackStateTree,
   IMutationTree,
+  PATH,
 } from 'proxy-state-tree'
 import { Derived } from './derived'
 import { Devtools, safeValue, safeValues, DevtoolsMessage } from './Devtools'
@@ -442,8 +443,8 @@ export class Overmind<ThisConfig extends IConfiguration>
                 this.addExecutionMutation(mutation)
               })
             }
-        return mutationTree
-      },
+            return mutationTree
+          },
       getTrackStateTree: () => {
         return this.proxyStateTree.getTrackStateTree()
       },
@@ -825,6 +826,41 @@ export class Overmind<ThisConfig extends IConfiguration>
   getMutationTree(): IMutationTree<any> {
     return this.proxyStateTree.getMutationTree()
   }
+  reaction(
+    stateCallback: (state: ThisConfig['state']) => any,
+    updateCallback: (state: ThisConfig['state']) => void,
+    deep: boolean = false
+  ) {
+    if (deep) {
+      const value = stateCallback(this.state)
+
+      if (!value || !value[IS_PROXY]) {
+        throw new Error(
+          'You have to return an object or array when using a "deep" reaction'
+        )
+      }
+
+      const path = value[PATH]
+
+      return this.addFlushListener((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.path.startsWith(path)) {
+            updateCallback(this.state)
+          }
+        })
+      })
+    } else {
+      const tree = this.proxyStateTree.getTrackStateTree()
+      tree.trackScope(
+        () => stateCallback(tree.state),
+        () => updateCallback(tree.state)
+      )
+
+      return () => {
+        tree.dispose()
+      }
+    }
+  }
   addMutationListener = (cb: IMutationCallback) => {
     return this.proxyStateTree.onMutation(cb)
   }

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

@@ -0,0 +1,137 @@
+import { Overmind, IAction, IState } from './'
+
+type State = {
+  foo: string
+  upperFoo: string
+}
+
+describe('Reaction', () => {
+  test('should create reaction', () => {
+    expect.assertions(2)
+
+    let runCount = 0
+
+    type State = {
+      foo: string
+    }
+    const state: State = {
+      foo: 'bar',
+    }
+
+    const changeFoo: Action = ({ state }) => {
+      state.foo = 'bar2'
+    }
+
+    const config = {
+      state,
+      actions: {
+        changeFoo,
+      },
+    }
+
+    type Config = typeof config
+    interface Action<Input = void> extends IAction<Config, Input> {}
+
+    const app = new Overmind(config)
+
+    app.reaction(
+      ({ foo }) => foo,
+      ({ foo }) => {
+        runCount++
+        expect(foo).toBe('bar2')
+      }
+    )
+
+    app.actions.changeFoo()
+
+    expect(runCount).toBe(1)
+  })
+  test('should create deep reaction', () => {
+    expect.assertions(2)
+
+    let runCount = 0
+
+    type State = {
+      foo: {
+        bar: string
+      }
+    }
+    const state: State = {
+      foo: {
+        bar: 'baz',
+      },
+    }
+
+    const changeFoo: Action = ({ state }) => {
+      state.foo.bar = 'baz2'
+    }
+
+    const config = {
+      state,
+      actions: {
+        changeFoo,
+      },
+    }
+
+    type Config = typeof config
+    interface Action<Input = void> extends IAction<Config, Input> {}
+
+    const app = new Overmind(config)
+
+    app.reaction(
+      ({ foo }) => foo,
+      ({ foo }) => {
+        runCount++
+        expect(foo.bar).toBe('baz2')
+      },
+      true
+    )
+
+    app.actions.changeFoo()
+
+    expect(runCount).toBe(1)
+  })
+  test('should throw deep reaction when invalid return object', () => {
+    expect.assertions(1)
+
+    let runCount = 0
+
+    type State = {
+      foo: {
+        bar: string
+      }
+    }
+    const state: State = {
+      foo: {
+        bar: 'baz',
+      },
+    }
+
+    const changeFoo: Action = ({ state }) => {
+      state.foo.bar = 'baz2'
+    }
+
+    const config = {
+      state,
+      actions: {
+        changeFoo,
+      },
+    }
+
+    type Config = typeof config
+    interface Action<Input = void> extends IAction<Config, Input> {}
+
+    const app = new Overmind(config)
+
+    expect(() => {
+      app.reaction(
+        ({ foo }) => foo.bar,
+        ({ foo }) => {
+          runCount++
+          expect(foo.bar).toBe('baz2')
+        },
+        true
+      )
+    }).toThrow()
+  })
+})