feat(proxy-state-tree): only notify about change when value actually changed

Author: christianalfoni

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

@@ -216,6 +216,7 @@ describe('Overmind', () => {
             args: ['bar2'],
             method: 'set',
             path: 'foo',
+            hasChangedValue: true,
           },
         ],
         executionId: 0,
@@ -239,6 +240,7 @@ describe('Overmind', () => {
             args: ['bar2'],
             method: 'set',
             path: 'foo',
+            hasChangedValue: true,
           },
         ],
         executionId: 0,
@@ -262,6 +264,7 @@ describe('Overmind', () => {
             args: ['bar2'],
             method: 'set',
             path: 'foo',
+            hasChangedValue: true,
           },
         ],
         executionId: 0,

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

@@ -37,6 +37,7 @@ describe('Mock', () => {
         method: 'set',
         path: 'foo',
         args: ['bar2!!!'],
+        hasChangedValue: true,
       },
     ])
   })
@@ -73,6 +74,7 @@ describe('Mock', () => {
         method: 'set',
         path: 'foo',
         args: ['bar!'],
+        hasChangedValue: true,
       },
     ])
   })

packages/node_modules/proxy-state-tree/src/Proxyfier.ts

@@ -201,6 +201,7 @@ export class Proxifier {
                   method,
                   path: path,
                   args: args,
+                  hasChangedValue: true,
                 })
 
                 return target[prop](...args)
@@ -229,6 +230,7 @@ export class Proxifier {
               method: 'set',
               path: nestedPath,
               args: [value],
+              hasChangedValue: true,
             })
 
             return Reflect.set(target, prop, value)
@@ -328,6 +330,7 @@ export class Proxifier {
                 method: 'set',
                 path: nestedPath,
                 args: [value],
+                hasChangedValue: value !== target[prop],
               },
               objectChangePath
             )
@@ -359,6 +362,7 @@ export class Proxifier {
                 method: 'unset',
                 path: nestedPath,
                 args: [],
+                hasChangedValue: true,
               },
               objectChangePath
             )

packages/node_modules/proxy-state-tree/src/index.test.ts

@@ -59,6 +59,7 @@ describe('TrackStateAccessTree', () => {
         method: 'set',
         path: 'foo',
         args: ['bar2'],
+        hasChangedValue: true,
       })
     })
 
@@ -184,7 +185,28 @@ describe('OBJECTS', () => {
         mutationTree.state.foo = mutationTree.state.foo // eslint-disable-line
       }).toThrowError(/exists in the state tree on path "foo"/i)
     })
-
+    test('should not notify changes to same value', () => {
+      let renderCount = 0
+      const state = {
+        foo: 'bar',
+      }
+      const tree = new ProxyStateTree(state)
+      const mutationTree = tree.getMutationTree()
+      const accessTree = tree.getTrackStateTree().track(() => {
+        renderCount++
+      })
+      accessTree.addTrackingPath('foo')
+      mutationTree.state.foo = 'bar'
+      expect(mutationTree.mutations).toEqual([
+        {
+          method: 'set',
+          path: 'foo',
+          args: ['bar'],
+          hasChangedValue: false,
+        },
+      ])
+      expect(renderCount).toBe(0)
+    })
     test('should track SET mutations', () => {
       const state = {
         foo: 'bar',
@@ -197,6 +219,7 @@ describe('OBJECTS', () => {
           method: 'set',
           path: 'foo',
           args: ['bar2'],
+          hasChangedValue: true,
         },
       ])
       expect(mutationTree.state.foo).toBe('bar2')
@@ -215,6 +238,7 @@ describe('OBJECTS', () => {
           method: 'unset',
           path: 'foo',
           args: [],
+          hasChangedValue: true,
         },
       ])
       expect(mutationTree.state.foo).toBe(undefined)
@@ -394,6 +418,7 @@ describe('ARRAYS', () => {
           method: 'push',
           path: 'foo',
           args: ['bar'],
+          hasChangedValue: true,
         },
       ])
 
@@ -412,6 +437,7 @@ describe('ARRAYS', () => {
           method: 'pop',
           path: 'foo',
           args: [],
+          hasChangedValue: true,
         },
       ])
 
@@ -431,6 +457,7 @@ describe('ARRAYS', () => {
           method: 'shift',
           path: 'foo',
           args: [],
+          hasChangedValue: true,
         },
       ])
 
@@ -449,6 +476,7 @@ describe('ARRAYS', () => {
           method: 'unshift',
           path: 'foo',
           args: ['foo'],
+          hasChangedValue: true,
         },
       ])
 
@@ -467,6 +495,7 @@ describe('ARRAYS', () => {
           method: 'splice',
           path: 'foo',
           args: [0, 1, 'bar'],
+          hasChangedValue: true,
         },
       ])
 
@@ -487,6 +516,7 @@ describe('ARRAYS', () => {
         method: 'set',
         path: 'foo',
         args: [['foo', 'bar']],
+        hasChangedValue: true,
       },
     ])
 
@@ -616,6 +646,7 @@ describe('REACTIONS', () => {
         method: 'set',
         path: 'foo',
         args: ['bar2'],
+        hasChangedValue: true,
       })
     })
 
@@ -721,11 +752,13 @@ describe('REACTIONS', () => {
           path: 'foo',
           method: 'set',
           args: ['bar2'],
+          hasChangedValue: true,
         },
         {
           path: 'foo',
           method: 'set',
           args: ['bar3'],
+          hasChangedValue: true,
         },
       ],
     })

packages/node_modules/proxy-state-tree/src/index.ts

@@ -190,7 +190,9 @@ export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {
     }
 
     for (let mutation of changes.mutations) {
-      paths.add(mutation.path)
+      if (mutation.hasChangedValue) {
+        paths.add(mutation.path)
+      }
     }
 
     // Sort so that parent paths are called first

packages/node_modules/proxy-state-tree/src/types.ts

@@ -8,6 +8,7 @@ export interface IMutation {
   method: string
   path: string
   args: any[]
+  hasChangedValue: boolean
 }
 
 export interface IMutationCallback {