New API for connectDecorator implementation

src/components/createAll.js

@@ -1,17 +1,15 @@
 import createProvider from './createProvider';
 import createProvideDecorator from './createProvideDecorator';
 
-import createConnector from './createConnector';
 import createConnectDecorator from './createConnectDecorator';
 
 export default function createAll(React) {
   // Wrapper components
   const Provider = createProvider(React);
-  const Connector = createConnector(React);
 
   // Higher-order components (decorators)
   const provide = createProvideDecorator(React, Provider);
-  const connect = createConnectDecorator(React, Connector);
+  const connect = createConnectDecorator(React);
 
-  return { Provider, Connector, provide, connect };
+  return { Provider, provide, connect };
 }

src/components/createConnectDecorator.js

@@ -1,24 +1,125 @@
+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) => ({ ...props, ...slice, ...actionsCreators});
+
+
+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 bindDispatch = 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.bindDispatch(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 };
+      }
+
+      bindDispatch(context = this.context) {
+        const { dispatch } = context.store;
+        const actionCreators = bindDispatch(dispatch);
+
+        invariant(
+          isPlainObject(actionCreators),
+          'The return value of `bindDispatch` 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;
+      }
+
+      getUnderlyingRef() {
+        return this.underlyingRef;
+      }
+
+      render() {
+        return <DecoratedComponent ref={component => (this.underlyingRef = component)} {...this.merge()} />;
       }
     };
   };

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);
+}