Memoize setter to prevent erroneous re-renders (fix #35)

src/index.ts

@@ -1,6 +1,7 @@
 import * as RxJS from 'rxjs'
 import { Emitter } from 'typed-rx-emitter'
 import { withReduxDevtools } from './plugins/reduxDevtools'
+import { mapValues } from './utils'
 
 export type Undux<Actions extends object> = {
   [K in keyof Actions]: {
@@ -49,8 +50,23 @@ export class StoreDefinition<Actions extends object> implements Store<Actions> {
   private store: StoreSnapshot<Actions>
   private alls: Emitter<Undux<Actions>> = new Emitter
   private emitter: Emitter<Actions> = new Emitter
+  private setters: {
+    readonly [K in keyof Actions]: (value: Actions[K]) => void
+  }
   constructor(state: Actions) {
+
+    // Set initial state
     this.store = new StoreSnapshot(state, this)
+
+    // Cache setters
+    this.setters = mapValues(state, (v, key) =>
+      (value: typeof v) => {
+        let previousValue = this.store.get(key)
+        this.store = this.store['assign'](key, value)
+        this.emitter.emit(key, value)
+        this.alls.emit(key, { key, previousValue, value })
+      }
+    )
   }
   on<K extends keyof Actions>(key: K): RxJS.Observable<Actions[K]> {
     return this.emitter.on(key)
@@ -62,12 +78,7 @@ export class StoreDefinition<Actions extends object> implements Store<Actions> {
     return this.store.get(key)
   }
   set<K extends keyof Actions>(key: K) {
-    return (value: Actions[K]) => {
-      let previousValue = this.store.get(key)
-      this.store = this.store['assign'](key, value)
-      this.emitter.emit(key, value)
-      this.alls.emit(key, { key, previousValue, value })
-    }
+    return this.setters[key]
   }
   getState() {
     return this.store.getState()

src/utils.ts

@@ -26,3 +26,19 @@ export function isImmutable(a: any): a is Immutable {
 export function getDisplayName<T>(Component: ComponentType<T>): string {
   return Component.displayName || Component.name || 'Component'
 }
+
+export function mapValues<O extends object, K extends keyof O, T>(
+  o: O,
+  f: (value: O[K], key: K) => T
+): {[K in keyof O]: T} {
+  let result: {[K in keyof O]: T} = {} as any
+  keys(o).forEach(k =>
+    result[k] = f(o[k] as any, k as any) // TODO: Improve this
+  )
+  return result
+}
+
+// Strict Object.keys
+function keys<O extends object>(o: O): (keyof O)[] {
+  return Object.keys(o) as any
+}

test/stateful.tsx

@@ -246,3 +246,10 @@ test('[stateful] it should update correctly when using nested stores', t => {
     t.is(_.innerHTML, '<div>3-4</div>')
   })
 })
+
+test('[stateful] it should memoize setters', t =>
+  withElement(MyComponentWithLens, _ => {
+    t.is(store.set('isTrue'), store.set('isTrue'))
+    t.is(store.set('users'), store.set('users'))
+  })
+)

test/stateless.tsx

@@ -228,3 +228,10 @@ test('[stateless] it should update correctly when using nested stores', t => {
     t.is(_.innerHTML, '<div>3-4</div>')
   })
 })
+
+test('[stateless] it should memoize setters', t =>
+  withElement(MyComponentWithLens, _ => {
+    t.is(store.set('isTrue'), store.set('isTrue'))
+    t.is(store.set('users'), store.set('users'))
+  })
+)

test/utils.ts

@@ -1,6 +1,6 @@
 import { test } from 'ava'
 import * as Immutable from 'immutable'
-import { isImmutable } from '../src/utils'
+import { isImmutable, mapValues } from '../src/utils'
 
 test('isImmutable', t => {
   t.is(isImmutable(Immutable.List()), true)
@@ -26,3 +26,10 @@ test('isImmutable', t => {
   t.is(isImmutable('a'), false)
   t.is(isImmutable(42), false)
 })
+
+test('mapValues', t => {
+  t.deepEqual(mapValues({}, _ => _ * 2), {})
+  t.deepEqual(mapValues({ a: 1 }, _ => _ * 2), { a: 2 })
+  t.deepEqual(mapValues({ a: 1, b: 2 }, _ => _ * 2), { a: 2, b: 4 })
+  t.deepEqual(mapValues({ a: 1, b: 2 }, (_, k) => k), { a: 'a', b: 'b' })
+})