Merge pull request #108 from mkorenko/fix-observers

Fix multiple properties observers are called several times.
tur-nr · Oct 7, 2017 · 8f28aee · 8f28aee
2 parents 8a86689 + 62e6077
commit 8f28aee
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 31 deletions.
diff --git a/dist/polymer-redux.html b/dist/polymer-redux.html
@@ -80,19 +80,19 @@
    * @param {Object} state
    */
 		var update = function update(state) {
+			var propertiesChanged = false;
 			bindings.forEach(function (name) {
-				var _properties$name = properties[name],
-				    statePath = _properties$name.statePath,
-				    readOnly = _properties$name.readOnly;
+				// Perhaps .reduce() to a boolean?
+				var statePath = properties[name].statePath;
 
 				var value = typeof statePath === 'function' ? statePath.call(element, state) : Polymer.Path.get(state, statePath);
 
-				if (readOnly) {
-					element._setProperty(name, value);
-				} else {
-					element[name] = value;
-				}
+				var changed = element._setPendingPropertyOrPath(name, value, true);
+				propertiesChanged = propertiesChanged || changed;
 			});
+			if (propertiesChanged) {
+				element._invalidateProperties();
+			}
 		};
 
 		// Redux listener

diff --git a/lib/index.js b/lib/index.js
@@ -80,19 +80,19 @@ function PolymerRedux(store) {
    * @param {Object} state
    */
 		var update = function update(state) {
+			var propertiesChanged = false;
 			bindings.forEach(function (name) {
-				var _properties$name = properties[name],
-				    statePath = _properties$name.statePath,
-				    readOnly = _properties$name.readOnly;
+				// Perhaps .reduce() to a boolean?
+				var statePath = properties[name].statePath;
 
 				var value = typeof statePath === 'function' ? statePath.call(element, state) : Polymer.Path.get(state, statePath);
 
-				if (readOnly) {
-					element._setProperty(name, value);
-				} else {
-					element[name] = value;
-				}
+				var changed = element._setPendingPropertyOrPath(name, value, true);
+				propertiesChanged = propertiesChanged || changed;
 			});
+			if (propertiesChanged) {
+				element._invalidateProperties();
+			}
 		};
 
 		// Redux listener

diff --git a/src/index.js b/src/index.js
@@ -55,18 +55,19 @@ export default function PolymerRedux(store) {
 		 * @param {Object} state
 		 */
 		const update = state => {
-			bindings.forEach(name => {
-				const {statePath, readOnly} = properties[name];
+			let propertiesChanged = false;
+			bindings.forEach(name => { // Perhaps .reduce() to a boolean?
+				const {statePath} = properties[name];
 				const value = (typeof statePath === 'function') ?
 					statePath.call(element, state) :
 					Polymer.Path.get(state, statePath);
 
-				if (readOnly) {
-					element._setProperty(name, value);
-				} else {
-					element[name] = value;
-				}
+				const changed = element._setPendingPropertyOrPath(name, value, true);
+				propertiesChanged = propertiesChanged || changed;
 			});
+			if (propertiesChanged) {
+				element._invalidateProperties();
+			}
 		};
 
 		// Redux listener

diff --git a/test/polymer-redux.spec.js b/test/polymer-redux.spec.js
@@ -24,7 +24,8 @@ const store = {
 const constructor = jest.fn();
 const connectedCallback = jest.fn();
 const disconnectedCallback = jest.fn();
-const setProperty = jest.fn();
+const setPendingPropertyOrPath = jest.fn();
+const invalidateProperties = jest.fn();
 const dispatchEvent = jest.fn();
 
 class Parent {
@@ -33,15 +34,19 @@ class Parent {
 	}
 
 	connectedCallback() {
-		connectedCallback();
+		return connectedCallback();
 	}
 
 	disconnectedCallback() {
-		disconnectedCallback();
+		return disconnectedCallback();
 	}
 
-	_setProperty(...args) {
-		setProperty(...args);
+	_setPendingPropertyOrPath(...args) {
+		return setPendingPropertyOrPath(...args);
+	}
+
+	_invalidateProperties() {
+		return invalidateProperties();
 	}
 
 	dispatchEvent(...args) {
@@ -124,16 +129,25 @@ describe('#PolymerRedux', () => {
 			describe('bindings', () => {
 				it('should have initial properties set with statePath', () => {
 					window.Polymer.Path.get.mockReturnValueOnce('foo');
+					setPendingPropertyOrPath.mockReturnValueOnce(true);
+
 					const e = new (ReduxMixin(ParentWithProps))();
 					e.connectedCallback();
-					expect(e.foo).toBe('foo');
+
+					expect.assertions(2);
+
+					expect(setPendingPropertyOrPath).toHaveBeenCalledWith('foo', 'foo', true)
+					expect(invalidateProperties).toBeCalled();
 				});
 
-				it('should set readOnly property via _setProperty()', () => {
+				it('should set readOnly property', () => {
 					statePath.mockReturnValueOnce('bar');
+					setPendingPropertyOrPath.mockReturnValueOnce(true);
+
 					const e = new (ReduxMixin(ParentWithProps))();
 					e.connectedCallback();
-					expect(setProperty).toHaveBeenCalledWith('bar', 'bar');
+
+					expect(setPendingPropertyOrPath).toHaveBeenCalledWith('bar', 'bar', true);
 				});
 
 				it('should warn against two-way bindings notify option', () => {