Style tweaks

Author: gaearon

src/components/createConnect.js

@@ -6,10 +6,12 @@ import wrapActionCreators from '../utils/wrapActionCreators';
 import invariant from 'invariant';
 
 const emptySelector = () => ({});
-
 const emptyBinder = () => ({});
-
-const identityMerge = (slice, actionsCreators, props) => ({ ...props, ...slice, ...actionsCreators});
+const identityMerge = (slice, actionsCreators, props) => ({
+  ...props,
+  ...slice,
+  ...actionsCreators
+});
 
 function getDisplayName(Component) {
   return Component.displayName || Component.name || 'Component';
@@ -19,11 +21,17 @@ export default function createConnect(React) {
   const { Component, PropTypes } = React;
   const storeShape = createStoreShape(PropTypes);
 
-  return function connect(select, dispatchBinder = emptyBinder, mergeHandler = identityMerge) {
-
-    const subscribing = select ? true : false;
+  return function connect(
+    select,
+    dispatchBinder = emptyBinder,
+    mergeHandler = identityMerge
+  ) {
+    const shouldSubscribe = select ? true : false;
     const selectState = select || emptySelector;
-    const bindDispatch = isPlainObject(dispatchBinder) ? wrapActionCreators(dispatchBinder) : dispatchBinder;
+    const bindDispatch = isPlainObject(dispatchBinder) ?
+      wrapActionCreators(dispatchBinder) :
+      dispatchBinder;
+
     const merge = mergeHandler;
 
     return DecoratedComponent => class ConnectDecorator extends Component {
@@ -41,31 +49,35 @@ export default function createConnect(React) {
 
       isSliceEqual(slice, nextSlice) {
         const isRefEqual = slice === nextSlice;
-        if (isRefEqual) {
-          return true;
-        } else if (typeof slice !== 'object' || typeof nextSlice !== 'object') {
+        if (
+          isRefEqual ||
+          typeof slice !== 'object' ||
+          typeof nextSlice !== 'object'
+        ) {
           return isRefEqual;
         }
+
         return shallowEqual(slice, nextSlice);
       }
 
       constructor(props, context) {
         super(props, context);
+        this.setUnderlyingRef = ::this.setUnderlyingRef;
         this.state = {
           ...this.selectState(props, context),
           ...this.bindDispatch(context)
         };
       }
 
       componentDidMount() {
-        if (subscribing) {
+        if (shouldSubscribe) {
           this.subscribed = true;
           this.unsubscribe = this.context.store.subscribe(::this.handleChange);
         }
       }
 
       componentWillUnmount() {
-        if (subscribing) {
+        if (shouldSubscribe) {
           this.unsubscribe();
         }
       }
@@ -120,8 +132,15 @@ export default function createConnect(React) {
         return this.underlyingRef;
       }
 
+      setUnderlyingRef(instance) {
+        this.underlyingRef = instance;
+      }
+
       render() {
-        return <DecoratedComponent ref={component => (this.underlyingRef = component)} {...this.merge()} />;
+        return (
+          <DecoratedComponent ref={this.setUnderlyingRef}
+                              {...this.merge()} />
+        );
       }
     };
   };

test/components/connect.spec.js

@@ -215,7 +215,7 @@ describe('React', () => {
       @connect(
         state => state,
         dispatch => ({ dispatch })
-        )
+      )
       class Container extends Component {
         render() {
           return <div {...this.props} />;
@@ -245,7 +245,7 @@ describe('React', () => {
       @connect(
         null,
         dispatch => ({ dispatch })
-        )
+      )
       class Container extends Component {
         render() {
           return <div {...this.props} />;
@@ -265,7 +265,6 @@ describe('React', () => {
       ).toNotThrow();
       const decorated = TestUtils.findRenderedComponentWithType(container, Container);
       expect(decorated.subscribed).toNotBe(true);
-
     });
 
     it('should unsubscribe before unmounting', () => {
@@ -285,7 +284,7 @@ describe('React', () => {
       @connect(
         state => ({string: state}),
         dispatch => ({ dispatch })
-        )
+      )
       class Container extends Component {
         render() {
           return <div {...this.props} />;
@@ -317,7 +316,7 @@ describe('React', () => {
       @connect(
         state => ({string: state}),
         dispatch => ({ dispatch })
-        )
+      )
       class Container extends Component {
         render() {
           return render(this.props);