feat(overmind): reactions now passes returned value to update callback

BREAKING CHANGE:
returned value passed to update callback instead of all state

Author: christianalfoni

packages/node_modules/overmind/src/index.ts

@@ -4,63 +4,65 @@ import {
   IFlushCallback,
   IMutation,
   IMutationCallback,
+  IMutationTree,
   IS_PROXY,
+  ITrackStateTree,
+  PATH,
   ProxyStateTree,
   TTree,
   VALUE,
-  ITrackStateTree,
-  IMutationTree,
-  PATH,
 } from 'proxy-state-tree'
+
 import { Derived } from './derived'
-import { Devtools, safeValue, safeValues, DevtoolsMessage } from './Devtools'
+import { Devtools, DevtoolsMessage, safeValue, safeValues } from './Devtools'
 import {
-  Events,
+  DefaultMode,
   EventType,
+  Events,
   Execution,
   NestedPartial,
   Options,
   ResolveActions,
-  DefaultMode,
-  TestMode,
-  SSRMode,
   ResolveState,
+  SSRMode,
+  TestMode,
 } from './internalTypes'
+import {
+  createContext,
+  createMutationOperator,
+  createNextPath,
+  createOperator,
+  operatorStarted,
+  operatorStopped,
+} from './operator'
 import { proxifyEffects } from './proxyfyEffects'
 import {
   IAction,
   IConfiguration,
+  IContext,
   IDerive,
+  IOnInitialize,
   IOperator,
+  IReaction,
   IState,
-  IOnInitialize,
-  IContext,
 } from './types'
 import {
-  deepCopy,
+  EXECUTION,
+  IS_OPERATOR,
+  IS_TEST,
+  MODE_DEFAULT,
+  MODE_SSR,
+  MODE_TEST,
   MockedEventEmitter,
+  createActionsProxy,
+  deepCopy,
+  getActionPaths,
+  getFunctionName,
+  isPromise,
   makeStringifySafeMutations,
   mergeState,
-  IS_TEST,
-  IS_OPERATOR,
-  getFunctionName,
-  getActionPaths,
-  createActionsProxy,
-  EXECUTION,
   processState,
-  isPromise,
-  MODE_DEFAULT,
-  MODE_TEST,
-  MODE_SSR,
 } from './utils'
-import {
-  operatorStarted,
-  operatorStopped,
-  createContext,
-  createNextPath,
-  createMutationOperator,
-  createOperator,
-} from './operator'
 
 export * from './types'
 
@@ -87,6 +89,8 @@ export interface Derive<Parent extends IState, Value>
 
 export interface OnInitialize extends IOnInitialize<Config> {}
 
+export interface Reaction extends IReaction<Config> {}
+
 export const json = (obj: any) =>
   deepCopy(obj && obj[IS_PROXY] ? obj[VALUE] : obj)
 
@@ -835,13 +839,10 @@ export class Overmind<ThisConfig extends IConfiguration>
   getMutationTree(): IMutationTree<any> {
     return this.proxyStateTree.getMutationTree()
   }
-  reaction = (
-    stateCallback: (state: ThisConfig['state']) => any,
-    updateCallback: (state: ThisConfig['state']) => void,
-    options: {
-      nested?: boolean
-      immediate?: boolean
-    } = {}
+  reaction: IReaction<ThisConfig> = (
+    stateCallback,
+    updateCallback,
+    options = {}
   ) => {
     let disposer
 
@@ -850,7 +851,7 @@ export class Overmind<ThisConfig extends IConfiguration>
 
       if (!value || !value[IS_PROXY]) {
         throw new Error(
-          'You have to return an object or array when using a "nested" reaction'
+          'You have to return an object or array from the Overmind state when using a "nested" reaction'
         )
       }
 
@@ -859,18 +860,21 @@ export class Overmind<ThisConfig extends IConfiguration>
       disposer = this.addFlushListener((mutations) => {
         mutations.forEach((mutation) => {
           if (mutation.path.startsWith(path)) {
-            updateCallback(this.state)
+            updateCallback(
+              path.split('.').reduce((aggr, key) => aggr[key], this.state)
+            )
           }
         })
       })
     } else {
       const tree = this.proxyStateTree.getTrackStateTree()
+      let returnValue
       const updateReaction = () => {
         tree.trackScope(
-          () => stateCallback(tree.state),
+          () => (returnValue = stateCallback(tree.state as any)),
           () => {
-            updateCallback(tree.state)
             updateReaction()
+            updateCallback(returnValue)
           }
         )
       }
@@ -883,7 +887,7 @@ export class Overmind<ThisConfig extends IConfiguration>
     }
 
     if (options.immediate) {
-      updateCallback(this.state)
+      updateCallback(this.state as any)
     }
 
     return disposer

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

@@ -1,4 +1,4 @@
-import { Overmind, IAction, IState } from './'
+import { IAction, IState, Overmind } from './'
 
 type State = {
   foo: string
@@ -36,7 +36,7 @@ describe('Reaction', () => {
 
     app.reaction(
       ({ foo }) => foo,
-      ({ foo }) => {
+      (foo) => {
         runCount++
         expect(foo).toBe('bar2')
       }
@@ -80,7 +80,7 @@ describe('Reaction', () => {
 
     app.reaction(
       ({ foo }) => foo,
-      ({ foo }) => {
+      (foo) => {
         runCount++
         expect(foo.bar).toBe('baz2')
       },
@@ -126,9 +126,9 @@ describe('Reaction', () => {
     expect(() => {
       app.reaction(
         ({ foo }) => foo.bar,
-        ({ foo }) => {
+        (bar) => {
           runCount++
-          expect(foo.bar).toBe('baz2')
+          expect(bar).toBe('baz2')
         },
         { nested: true }
       )

packages/node_modules/overmind/src/types.ts

@@ -1,5 +1,5 @@
-import { ResolveActions, ResolveState } from './internalTypes'
 import { Overmind } from './'
+import { ResolveActions, ResolveState } from './internalTypes'
 import { IS_OPERATOR } from './utils'
 
 /** ===== PUBLIC API
@@ -39,6 +39,17 @@ export type IContext<ThisConfig extends IConfiguration> = {
   effects: ThisConfig['effects']
 }
 
+export interface IReaction<ThisConfig extends IConfiguration> {
+  <O>(
+    stateCallback: (state: ResolveState<ThisConfig['state']>) => O,
+    updateCallback: (value: O) => void,
+    options?: {
+      nested?: boolean
+      immediate?: boolean
+    }
+  ): void
+}
+
 export interface IAction<
   ThisConfig extends IConfiguration,
   Value,

packages/overmind-website/api/reaction.md

@@ -7,11 +7,11 @@ reaction(
   // Access and return some state to react to
   (state) => state.foo,
 
-  // Do something
-  (state) => {},
+  // Do something with the returned value
+  (foo) => {},
 
   {
-    // If you return an object or array you can set this to true.
+    // If you return an object or array from the state you can set this to true.
     // The reaction will run when any nested changes occur as well
     nested: false,
 
@@ -25,7 +25,7 @@ There are two points of setting up reactions in Overmind.
 
 ## onInitialize
 
-The onInitialize hook is where you set up reactions that lives throughout your application lifetime. This is typicaly for syncing operations. The reaction function returns a function to dispose it. That means you can give effects the possibility to create and dispose of reactions in any action.
+The onInitialize hook is where you set up reactions that lives throughout your application lifetime. The reaction function returns a function to dispose it. That means you can give effects the possibility to create and dispose of reactions in any action.
 
 ```marksy
 h(Example, { name: "api/reaction_oninitialize" })

packages/overmind-website/examples/api/reaction_oninitialize.ts

@@ -9,7 +9,7 @@ import { OnInitialize } from 'overmind'
 export const onInitialize: OnInitialize = ({ effects }, instance) => {
   instance.reaction(
     ({ todos }) => todos,
-    ({ todos }) => effects.storage.saveTodos(todo),
+    (todos) => effects.storage.saveTodos(todos),
     {
       nested: true
     }
@@ -25,7 +25,7 @@ export const onInitialize: OnInitialize = ({ effects }, instance) => {
 export const onInitialize = ({ effects }, instance) => {
   instance.reaction(
     ({ todos }) => todos,
-    ({ todos }) => effects.storage.saveTodos(todo),
+    (todos) => effects.storage.saveTodos(todos),
     {
       nested: true
     }