intermediate commit. old decorator and connector are still present

Author: gnoff

src/components/createAll.js

@@ -2,8 +2,8 @@ import createProvider from './createProvider';
 import createProvideDecorator from './createProvideDecorator';
 
 import createConnector from './createConnector';
+import createConnectDecoratorOld from './createConnectDecoratorOld';
 import createConnectDecorator from './createConnectDecorator';
-import createConnectWrapper from './createConnectWrapper';
 
 export default function createAll(React) {
   // Wrapper components
@@ -12,10 +12,8 @@ export default function createAll(React) {
 
   // Higher-order components (decorators)
   const provide = createProvideDecorator(React, Provider);
-  const connectDecorate = createConnectDecorator(React, Connector);
-  const connect = createConnectWrapper(React);
+  const connectDecoratorOld = createConnectDecoratorOld(React, Connector);
+  const connect = createConnectDecorator(React);
 
-  
-
-  return { Provider, Connector, provide, connectDecorate, connect };
+  return { Provider, Connector, provide, connect, connectDecoratorOld };
 }

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.merge()} />;
       }
     };
   };

src/components/createConnectDecoratorOld.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/components/createConnectWrapper.js

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

src/index.js

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

src/native.js

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