fixed connect issue with stale props (zombie children)

package.json

@@ -28,15 +28,15 @@
   "bundlesize": [
     {
       "path": "full/preact.js",
-      "maxSize": "760b"
+      "maxSize": "850b"
     },
     {
       "path": "dist/unistore.js",
       "maxSize": "400b"
     },
     {
       "path": "preact.js",
-      "maxSize": "600b"
+      "maxSize": "700b"
     }
   ],
   "babel": {

src/index.js

@@ -1,4 +1,5 @@
 import { assign } from './util';
+import createSubscriber from './subscriber';
 
 /**
  * Creates a new store, which is a tiny evented state container.
@@ -12,26 +13,12 @@ import { assign } from './util';
  * store.setState({ c: 'd' });   // logs { a: 'b', c: 'd' }
  */
 export default function createStore(state) {
-	let listeners = [];
+	const { emit, subscribe, unsubscribe } = createSubscriber();
 	state = state || {};
 
-	function unsubscribe(listener) {
-		let out = [];
-		for (let i=0; i<listeners.length; i++) {
-			if (listeners[i]===listener) {
-				listener = null;
-			}
-			else {
-				out.push(listeners[i]);
-			}
-		}
-		listeners = out;
-	}
-
 	function setState(update, overwrite, action) {
 		state = overwrite ? update : assign(assign({}, state), update);
-		let currentListeners = listeners;
-		for (let i=0; i<currentListeners.length; i++) currentListeners[i](state, action);
+		emit(state, action);
 	}
 
 	/**
@@ -77,10 +64,7 @@ export default function createStore(state) {
 		 * @param {Function} listener	A function to call when state changes. Gets passed the new state.
 		 * @returns {Function} unsubscribe()
 		 */
-		subscribe(listener) {
-			listeners.push(listener);
-			return () => { unsubscribe(listener); };
-		},
+		subscribe,
 
 		/**
 		 * Remove a previously-registered listener function.

src/integrations/preact.js

@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import createSubscriber from '../subscriber';
 import { assign, mapActions, select } from '../util';
 
 /**
@@ -22,6 +23,8 @@ export function connect(mapStateToProps, actions) {
 	return Child => {
 		function Wrapper(props, context) {
 			const store = context.store;
+			const { emit, subscribe, unsubscribe } = createSubscriber();
+			const subStore = { ...store, subscribe, unsubscribe };
 			let state = mapStateToProps(store ? store.getState() : {}, props);
 			const boundActions = actions ? mapActions(actions, store) : { store };
 			let update = () => {
@@ -34,6 +37,7 @@ export function connect(mapStateToProps, actions) {
 					state = mapped;
 					return this.setState({});
 				}
+				emit();
 			};
 			this.componentWillReceiveProps = p => {
 				props = p;
@@ -45,6 +49,7 @@ export function connect(mapStateToProps, actions) {
 			this.componentWillUnmount = () => {
 				store.unsubscribe(update);
 			};
+			this.getChildContext = () => ({ store: subStore });
 			this.render = props => h(Child, assign(assign(assign({}, boundActions), props), state));
 		}
 		return (Wrapper.prototype = new Component()).constructor = Wrapper;

src/integrations/react.js

@@ -1,4 +1,5 @@
 import { createElement, Children, Component } from 'react';
+import createSubscriber from '../subscriber';
 import { assign, mapActions, select } from '../util';
 
 const CONTEXT_TYPES = {
@@ -26,6 +27,8 @@ export function connect(mapStateToProps, actions) {
 		function Wrapper(props, context) {
 			Component.call(this, props, context);
 			const store = context.store;
+			const { emit, subscribe, unsubscribe } = createSubscriber();
+			const subStore = { ...store, subscribe, unsubscribe };
 			let state = mapStateToProps(store ? store.getState() : {}, props);
 			const boundActions = actions ? mapActions(actions, store) : { store };
 			let update = () => {
@@ -38,6 +41,7 @@ export function connect(mapStateToProps, actions) {
 					state = mapped;
 					return this.forceUpdate();
 				}
+				emit();
 			};
 			this.componentWillReceiveProps = p => {
 				props = p;
@@ -49,8 +53,10 @@ export function connect(mapStateToProps, actions) {
 			this.componentWillUnmount = () => {
 				store.unsubscribe(update);
 			};
+			this.getChildContext = () => ({ store: subStore });
 			this.render = () => createElement(Child, assign(assign(assign({}, boundActions), this.props), state));
 		}
+		Wrapper.childContextTypes = CONTEXT_TYPES;
 		Wrapper.contextTypes = CONTEXT_TYPES;
 		return (Wrapper.prototype = Object.create(Component.prototype)).constructor = Wrapper;
 	};

src/subscriber.js

@@ -0,0 +1,35 @@
+export default function createSubscriber() {
+	let listeners = [];
+
+	//  Remove a previously-registered listener function.
+	function unsubscribe(listener) {
+		let out = [];
+		for (let i=0; i<listeners.length; i++) {
+			if (listeners[i]===listener) {
+				listener = null;
+			}
+			else {
+				out.push(listeners[i]);
+			}
+		}
+		listeners = out;
+	}
+
+	return {
+		// Calls registered listeners with given arguments.
+		emit() {
+			let currentListeners = listeners;
+			for (let i=0; i<currentListeners.length; i++) {
+				currentListeners[i].apply(null, arguments);
+			}
+		},
+
+		// Register a listener function to be called whenever state is changed. Returns an `unsubscribe()` function.
+		subscribe(listener) {
+			listeners.push(listener);
+			return () => { unsubscribe(listener); };
+		},
+
+		unsubscribe
+	};
+}

test/preact/preact.test.js

@@ -211,5 +211,49 @@ describe(`integrations/preact${global.IS_PREACT_8 ? '-8' : ''}`, () => {
 				expect.anything()
 			);
 		});
+
+		it('should ignore stale props (zombie children)', async () => {
+			const orgState = {obj: {foo: 1, bar: 2}, current: 'foo'}
+			const store = createStore(orgState);
+			const Child = ({num}) => <div>{num}</div>;
+			const mapStateToProps = jest.fn((state, {id}) => ({num: state.obj[id]}));
+			const ConnectedChild = connect(mapStateToProps)(Child);
+			const Parent = jest.fn(({current}) => <ConnectedChild id={current} />);
+			const ConnectedParent = connect('current')(Parent);
+
+			render(
+				<Provider store={store}>
+					<ConnectedParent />
+				</Provider>,
+				document.body
+			);
+
+			expect(mapStateToProps).toHaveBeenCalledTimes(1);
+			expect(mapStateToProps).toHaveBeenCalledWith(
+				orgState, {children: NO_CHILDREN, id: 'foo'});
+			expect(Parent).toHaveBeenCalledTimes(1);
+
+			mapStateToProps.mockClear();
+			Parent.mockClear();
+			store.setState({current: 'bar'});
+			await sleep(1);
+
+			// Should only call the child mapStateToProps once (thru parent render).
+			expect(mapStateToProps).toHaveBeenCalledTimes(1);
+			expect(mapStateToProps).toHaveBeenCalledWith(
+				{...orgState, current: 'bar'}, {children: NO_CHILDREN, id: 'bar'});
+			expect(Parent).toHaveBeenCalledTimes(1);
+
+			mapStateToProps.mockClear();
+			Parent.mockClear();
+			store.setState({obj: {foo: 1, bar: 3}});
+			await sleep(1);
+
+			// Should only call the child mapStateToProps once (ignoring parent render).
+			expect(mapStateToProps).toHaveBeenCalledTimes(1);
+			expect(mapStateToProps).toHaveBeenCalledWith(
+				{obj: {foo: 1, bar: 3}, current: 'bar'}, {children: NO_CHILDREN, id: 'bar'});
+			expect(Parent).not.toHaveBeenCalled();
+		});
 	});
 });

test/react/react.test.js

@@ -184,4 +184,46 @@ describe('integrations/react', () => {
 			expect.anything()
 		);
 	});
+
+	it('should ignore stale props (zombie children)', async () => {
+		const orgState = {obj: {foo: 1, bar: 2}, current: 'foo'}
+		const store = createStore(orgState);
+		const Child = ({num}) => <div>{num}</div>;
+		const mapStateToProps = jest.fn((state, {id}) => ({num: state.obj[id]}));
+		const ConnectedChild = connect(mapStateToProps)(Child);
+		const Parent = jest.fn(({current}) => <ConnectedChild id={current} />);
+		const ConnectedParent = connect('current')(Parent);
+
+		mount(
+			<Provider store={store}>
+				<ConnectedParent />
+			</Provider>
+		);
+
+		expect(mapStateToProps).toHaveBeenCalledTimes(1);
+		expect(mapStateToProps).toHaveBeenCalledWith(orgState, {id: 'foo'});
+		expect(Parent).toHaveBeenCalledTimes(1);
+
+		mapStateToProps.mockClear();
+		Parent.mockClear();
+		store.setState({current: 'bar'});
+		await sleep(1);
+
+		// Should only call the child mapStateToProps once (thru parent render).
+		expect(mapStateToProps).toHaveBeenCalledTimes(1);
+		expect(mapStateToProps).toHaveBeenCalledWith(
+			{...orgState, current: 'bar'}, {id: 'bar'});
+		expect(Parent).toHaveBeenCalledTimes(1);
+
+		mapStateToProps.mockClear();
+		Parent.mockClear();
+		store.setState({obj: {foo: 1, bar: 3}});
+		await sleep(1);
+
+		// Should only call the child mapStateToProps once (ignoring parent render).
+		expect(mapStateToProps).toHaveBeenCalledTimes(1);
+		expect(mapStateToProps).toHaveBeenCalledWith(
+			{obj: {foo: 1, bar: 3}, current: 'bar'}, {id: 'bar'});
+		expect(Parent).not.toHaveBeenCalled();
+	});
 });