WIP connectWrapper that will eventually replace connectDecorator and Connector

Author: gnoff

src/components/createAll.js

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

src/components/createConnectWrapper.js

@@ -0,0 +1,140 @@
+import createStoreShape from '../utils/createStoreShape';
+import getDisplayName from '../utils/getDisplayName';
+import shallowEqual from '../utils/shallowEqual';
+import isPlainObject from '../utils/isPlainObject';
+import wrapActionCreators from '../utils/wrapActionCreators';
+import invariant from 'invariant';
+
+const emptySelector = () => ({});
+
+const emptyBinder = () => ({});
+
+const identityMerge = (slice, actionsCreators, props) => ({...slice, ...actionsCreators, ...props});
+
+
+export default function createConnectWrapper(React) {
+  const { Component, PropTypes } = React;
+  const storeShape = createStoreShape(PropTypes);
+
+  return function connect(select, bindActionCreators, merge) {
+
+    const subscribing = select ? true : false;
+
+    select = select || emptySelector;
+
+    bindActionCreators = bindActionCreators || emptyBinder;
+
+    if (isPlainObject(bindActionCreators)) {
+      bindActionCreators = wrapActionCreators(bindActionCreators);
+    }
+
+    merge = merge || identityMerge;
+
+    return DecoratedComponent => class ConnectWrapper extends Component {
+      static displayName = `ConnectWrapper(${getDisplayName(DecoratedComponent)})`;
+      static DecoratedComponent = DecoratedComponent;
+
+      static contextTypes = {
+        store: storeShape.isRequired
+      };
+
+      componentWillReceiveProps(nextProps) {
+        console.log('recieving props', this.props, nextProps)
+      }
+
+      shouldComponentUpdate(nextProps, nextState) {
+        console.log('shallowEqual of props', shallowEqual(this.props, nextProps), this.props, nextProps)
+        return (this.subscribed && !this.isSliceEqual(this.state.slice, nextState.slice)) ||
+               !shallowEqual(this.props, nextProps);
+      }
+
+      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),
+        };
+      }
+
+      componentWillMount() {
+        console.log('will mount', this.props)
+      }
+
+      componentDidMount() {
+        console.log('mounted', this.props)
+        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 = select(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
+        );
+
+        console.log('merging with ', merged)
+
+        return merged;
+      }
+
+      render() {
+        return <DecoratedComponent {...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, connectDecorate, connect } = 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, connectDecorate, connect } = 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 };

test/components/connect.spec.js

@@ -2,7 +2,7 @@ import expect from 'expect';
 import jsdomReact from './jsdomReact';
 import React, { PropTypes, Component } from 'react/addons';
 import { createStore } from 'redux';
-import { connect, Connector } from '../../src/index';
+import { connect } from '../../src/index';
 
 const { TestUtils } = React.addons;
 
@@ -46,7 +46,7 @@ describe('React', () => {
       expect(div.props.pass).toEqual('through');
       expect(div.props.foo).toEqual('bar');
       expect(() =>
-        TestUtils.findRenderedComponentWithType(container, Connector)
+        TestUtils.findRenderedComponentWithType(container, Container)
       ).toNotThrow();
     });