New API for connectDecorator implementation

src/components/createAll.js

@@ -2,6 +2,7 @@ import createProvider from './createProvider';
 import createProvideDecorator from './createProvideDecorator';
 
 import createConnector from './createConnector';
+import createConnectDecoratorDeprecated from './createConnectDecoratorDeprecated';
 import createConnectDecorator from './createConnectDecorator';
 
 export default function createAll(React) {
@@ -11,7 +12,8 @@ export default function createAll(React) {
 
   // Higher-order components (decorators)
   const provide = createProvideDecorator(React, Provider);
-  const connect = createConnectDecorator(React, Connector);
+  const connectDeprecated = createConnectDecoratorDeprecated(React, Connector);
+  const connect = createConnectDecorator(React);
 
-  return { Provider, Connector, provide, connect };
+  return { Provider, Connector, provide, connect, connectDeprecated };
 }

src/components/createConnectDecorator.js

@@ -1,24 +1,121 @@
+import createStoreShape from '../utils/createStoreShape';
 import getDisplayName from '../utils/getDisplayName';
 import shallowEqualScalar from '../utils/shallowEqualScalar';
+import shallowEqual from '../utils/shallowEqual';
+import isPlainObject from '../utils/isPlainObject';
+import wrapActionCreators from '../utils/wrapActionCreators';
+import invariant from 'invariant';
 
-export default function createConnectDecorator(React, Connector) {
-  const { Component } = React;
+const emptySelector = () => ({});
 
-  return function connect(select) {
-    return DecoratedComponent => class ConnectorDecorator extends Component {
-      static displayName = `Connector(${getDisplayName(DecoratedComponent)})`;
+const emptyBinder = () => ({});
+
+const identityMerge = (slice, actionsCreators, props) => ({...slice, ...actionsCreators, ...props});
+
+
+export default function createConnectDecorator(React) {
+  const { Component, PropTypes } = React;
+  const storeShape = createStoreShape(PropTypes);
+
+  return function connect(select, dispatchBinder = emptyBinder, mergeHandler = identityMerge) {
+
+    const subscribing = select ? true : false;
+    const selectState = select || emptySelector;
+    const bindActionCreators = isPlainObject(dispatchBinder) ? wrapActionCreators(dispatchBinder) : dispatchBinder;
+    const merge = mergeHandler;
+
+    return DecoratedComponent => class ConnectDecorator extends Component {
+      static displayName = `ConnectDecorator(${getDisplayName(DecoratedComponent)})`;
       static DecoratedComponent = DecoratedComponent;
 
-      shouldComponentUpdate(nextProps) {
-        return !shallowEqualScalar(this.props, nextProps);
+      static contextTypes = {
+        store: storeShape.isRequired
+      };
+
+      shouldComponentUpdate(nextProps, nextState) {
+        return (this.subscribed && !this.isSliceEqual(this.state.slice, nextState.slice)) ||
+               !shallowEqualScalar(this.props, nextProps);
       }
 
-      render() {
-        return (
-          <Connector select={state => select(state, this.props)}>
-            {stuff => <DecoratedComponent {...stuff} {...this.props} />}
-          </Connector>
+      isSliceEqual(slice, nextSlice) {
+        const isRefEqual = slice === nextSlice;
+        if (isRefEqual) {
+          return true;
+        } else if (typeof slice !== 'object' || typeof nextSlice !== 'object') {
+          return isRefEqual;
+        }
+        return shallowEqual(slice, nextSlice);
+      }
+
+      constructor(props, context) {
+        super(props, context);
+        this.state = {
+          ...this.selectState(props, context),
+          ...this.bindActionCreators(context)
+        };
+      }
+
+      componentDidMount() {
+        if (subscribing) {
+          this.subscribed = true;
+          this.unsubscribe = this.context.store.subscribe(::this.handleChange);
+        }
+      }
+
+      componentWillUnmount() {
+        if (subscribing) {
+          this.unsubscribe();
+        }
+      }
+
+      handleChange(props = this.props) {
+        const nextState = this.selectState(props, this.context);
+        if (!this.isSliceEqual(this.state.slice, nextState.slice)) {
+          this.setState(nextState);
+        }
+      }
+
+      selectState(props = this.props, context = this.context) {
+        const state = context.store.getState();
+        const slice = selectState(state);
+
+        invariant(
+          isPlainObject(slice),
+          'The return value of `select` prop must be an object. Instead received %s.',
+          slice
+        );
+
+        return { slice };
+      }
+
+      bindActionCreators(context = this.context) {
+        const { dispatch } = context.store;
+        const actionCreators = bindActionCreators(dispatch);
+
+        invariant(
+          isPlainObject(actionCreators),
+          'The return value of `bindActionCreators` prop must be an object. Instead received %s.',
+          actionCreators
+        );
+
+        return { actionCreators };
+      }
+
+      merge(props = this.props, state = this.state) {
+        const { slice, actionCreators } = state;
+        const merged = merge(slice, actionCreators, props);
+
+        invariant(
+          isPlainObject(merged),
+          'The return value of `merge` prop must be an object. Instead received %s.',
+          merged
         );
+
+        return merged;
+      }
+
+      render() {
+        return <DecoratedComponent {...this.props} {...this.merge()} />;
       }
     };
   };

src/components/createConnectDecoratorDeprecated.js

@@ -0,0 +1,25 @@
+import getDisplayName from '../utils/getDisplayName';
+import shallowEqualScalar from '../utils/shallowEqualScalar';
+
+export default function createConnectDecorator(React, Connector) {
+  const { Component } = React;
+
+  return function connect(select) {
+    return DecoratedComponent => class ConnectorDecorator extends Component {
+      static displayName = `Connector(${getDisplayName(DecoratedComponent)})`;
+      static DecoratedComponent = DecoratedComponent;
+
+      shouldComponentUpdate(nextProps) {
+        return !shallowEqualScalar(this.props, nextProps);
+      }
+
+      render() {
+        return (
+          <Connector select={state => select(state, this.props)}>
+            {stuff => <DecoratedComponent {...stuff} {...this.props} />}
+          </Connector>
+        );
+      }
+    };
+  };
+}

src/index.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import createAll from './components/createAll';
 
-export const { Provider, Connector, provide, connect } = createAll(React);
+export const { Provider, Connector, provide, connect, connectDeprecated } = createAll(React);

src/native.js

@@ -1,4 +1,4 @@
 import React from 'react-native';
 import createAll from './components/createAll';
 
-export const { Provider, Connector, provide, connect } = createAll(React);
+export const { Provider, Connector, provide, connect, connectDeprecated } = createAll(React);

src/utils/wrapActionCreators.js

@@ -0,0 +1,5 @@
+import { bindActionCreators } from 'redux';
+
+export default function wrapActionCreators(actionCreators) {
+  return dispatch => bindActionCreators(actionCreators, dispatch);
+}

test/components/Connector.spec.js

@@ -1,7 +1,7 @@
 import expect from 'expect';
 import jsdomReact from './jsdomReact';
 import React, { PropTypes, Component } from 'react/addons';
-import { createStore } from 'redux';
+import { createStore, combineReducers } from 'redux';
 import { Connector } from '../../src/index';
 
 const { TestUtils } = React.addons;
@@ -32,7 +32,7 @@ describe('React', () => {
     }
 
     it('should receive the store in the context', () => {
-      const store = createStore({});
+      const store = createStore(() => ({}));
 
       const tree = TestUtils.renderIntoDocument(
         <Provider store={store}>
@@ -74,7 +74,7 @@ describe('React', () => {
       const subscribe = store.subscribe;
 
       // Keep track of unsubscribe by wrapping subscribe()
-      const spy = expect.createSpy(() => {});
+      const spy = expect.createSpy(() => ({}));
       store.subscribe = (listener) => {
         const unsubscribe = subscribe(listener);
         return () => {
@@ -101,7 +101,7 @@ describe('React', () => {
 
     it('should shallowly compare the selected state to prevent unnecessary updates', () => {
       const store = createStore(stringBuilder);
-      const spy = expect.createSpy(() => {});
+      const spy = expect.createSpy(() => ({}));
       function render({ string }) {
         spy();
         return <div string={string}/>;
@@ -129,10 +129,10 @@ describe('React', () => {
     });
 
     it('should recompute the state slice when the select prop changes', () => {
-      const store = createStore({
+      const store = createStore(combineReducers({
         a: () => 42,
         b: () => 72
-      });
+      }));
 
       function selectA(state) {
         return { result: state.a };
@@ -174,7 +174,7 @@ describe('React', () => {
     });
 
     it('should pass dispatch() to the child function', () => {
-      const store = createStore({});
+      const store = createStore(() => ({}));
 
       const tree = TestUtils.renderIntoDocument(
         <Provider store={store}>
@@ -191,7 +191,7 @@ describe('React', () => {
     });
 
     it('should throw an error if select returns anything but a plain object', () => {
-      const store = createStore({});
+      const store = createStore(() => ({}));
 
       expect(() => {
         TestUtils.renderIntoDocument(

test/components/Provider.spec.js

@@ -21,7 +21,7 @@ describe('React', () => {
     }
 
     it('should add the store to the child context', () => {
-      const store = createStore({});
+      const store = createStore(() => ({}));
 
       const tree = TestUtils.renderIntoDocument(
         <Provider store={store}>
@@ -36,7 +36,7 @@ describe('React', () => {
     it('should replace just the reducer when receiving a new store in props', () => {
       const store1 = createStore((state = 10) => state + 1);
       const store2 = createStore((state = 10) => state * 2);
-      const spy = expect.createSpy(() => {});
+      const spy = expect.createSpy(() => ({}));
 
       class ProviderContainer extends Component {
         state = { store: store1 };