Merge pull request #25 from gaearon/new-api

New API

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-redux",
-  "version": "0.4.0",
-  "description": "Redux bindings for React",
+  "version": "0.5.0",
+  "description": "React bindings for Redux",
   "main": "./lib/index.js",
   "scripts": {
     "build:lib": "babel src --out-dir lib",
@@ -60,6 +60,6 @@
     "invariant": "^2.0.0"
   },
   "peerDependencies": {
-    "redux": "^1.0.0 || 1.0.0-alpha || 1.0.0-rc"
+    "redux": "^1.0.0 || 1.0.0-rc"
   }
 }

src/components/createAll.js

@@ -1,12 +1,9 @@
 import createProvider from './createProvider';
-
-import createConnector from './createConnector';
-import createConnectDecorator from './createConnectDecorator';
+import createConnect from './createConnect';
 
 export default function createAll(React) {
   const Provider = createProvider(React);
-  const connect = createConnectDecorator(React, createConnector(React));
+  const connect = createConnect(React);
 
-  // provider and Connector are deprecated and removed from public API
   return { Provider, connect };
 }

src/components/createConnect.js

@@ -0,0 +1,144 @@
+import createStoreShape from '../utils/createStoreShape';
+import shallowEqualScalar from '../utils/shallowEqualScalar';
+import shallowEqual from '../utils/shallowEqual';
+import isPlainObject from '../utils/isPlainObject';
+import wrapActionCreators from '../utils/wrapActionCreators';
+import invariant from 'invariant';
+
+const defaultMapState = () => ({});
+const defaultMapDispatch = dispatch => ({ dispatch });
+const defaultMergeProps = (stateSlice, actionsCreators, props) => ({
+  ...props,
+  ...stateSlice,
+  ...actionsCreators
+});
+
+function getDisplayName(Component) {
+  return Component.displayName || Component.name || 'Component';
+}
+
+export default function createConnect(React) {
+  const { Component, PropTypes } = React;
+  const storeShape = createStoreShape(PropTypes);
+
+  return function connect(
+    mapState = defaultMapState,
+    mapDispatchOrActionCreators = defaultMapDispatch,
+    mergeProps = defaultMergeProps
+  ) {
+    const shouldSubscribe = mapState !== defaultMapState;
+    const mapDispatch = isPlainObject(mapDispatchOrActionCreators) ?
+      wrapActionCreators(mapDispatchOrActionCreators) :
+      mapDispatchOrActionCreators;
+
+    return DecoratedComponent => class ConnectDecorator extends Component {
+      static displayName = `Connect(${getDisplayName(DecoratedComponent)})`;
+      static DecoratedComponent = DecoratedComponent;
+
+      static contextTypes = {
+        store: storeShape.isRequired
+      };
+
+      shouldComponentUpdate(nextProps, nextState) {
+        return (this.subscribed && !this.isSliceEqual(this.state.slice, nextState.slice)) ||
+               !shallowEqualScalar(this.props, nextProps);
+      }
+
+      isSliceEqual(slice, nextSlice) {
+        const isRefEqual = slice === nextSlice;
+        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.mapState(props, context),
+          ...this.mapDispatch(context)
+        };
+      }
+
+      componentDidMount() {
+        if (shouldSubscribe) {
+          this.subscribed = true;
+          this.unsubscribe = this.context.store.subscribe(::this.handleChange);
+        }
+      }
+
+      componentWillUnmount() {
+        if (shouldSubscribe) {
+          this.unsubscribe();
+        }
+      }
+
+      handleChange(props = this.props) {
+        const nextState = this.mapState(props, this.context);
+        if (!this.isSliceEqual(this.state.slice, nextState.slice)) {
+          this.setState(nextState);
+        }
+      }
+
+      mapState(props = this.props, context = this.context) {
+        const state = context.store.getState();
+        const slice = mapState(state);
+
+        invariant(
+          isPlainObject(slice),
+          '`mapState` must return an object. Instead received %s.',
+          slice
+        );
+
+        return { slice };
+      }
+
+      mapDispatch(context = this.context) {
+        const { dispatch } = context.store;
+        const actionCreators = mapDispatch(dispatch);
+
+        invariant(
+          isPlainObject(actionCreators),
+          '`mapDispatch` must return an object. Instead received %s.',
+          actionCreators
+        );
+
+        return { actionCreators };
+      }
+
+      merge(props = this.props, state = this.state) {
+        const { slice, actionCreators } = state;
+        const merged = mergeProps(slice, actionCreators, props);
+
+        invariant(
+          isPlainObject(merged),
+          '`mergeProps` must return an object. Instead received %s.',
+          merged
+        );
+
+        return merged;
+      }
+
+      getUnderlyingRef() {
+        return this.underlyingRef;
+      }
+
+      setUnderlyingRef(instance) {
+        this.underlyingRef = instance;
+      }
+
+      render() {
+        return (
+          <DecoratedComponent ref={this.setUnderlyingRef}
+                              {...this.merge()} />
+        );
+      }
+    };
+  };
+}

src/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
 import createAll from './components/createAll';
 
-// provide and Connector are deprecated and removed from public API
 export const { Provider, connect } = createAll(React);

src/native.js

@@ -1,5 +1,4 @@
 import React from 'react-native';
 import createAll from './components/createAll';
 
-// provide and Connector are deprecated and removed from public API
 export const { Provider, connect } = createAll(React);

src/utils/isPlainObject.js

@@ -1,3 +1,25 @@
+const fnToString = (fn) => Function.prototype.toString.call(fn);
+
+/**
+ * @param {any} obj The object to inspect.
+ * @returns {boolean} True if the argument appears to be a plain object.
+ */
 export default function isPlainObject(obj) {
-  return obj ? typeof obj === 'object' && Object.getPrototypeOf(obj) === Object.prototype : false;
+  if (!obj || typeof obj !== 'object') {
+    return false;
+  }
+
+  const proto = typeof obj.constructor === 'function' ?
+    Object.getPrototypeOf(obj) :
+    Object.prototype;
+
+  if (proto === null) {
+    return true;
+  }
+
+  const constructor = proto.constructor;
+
+  return typeof constructor === 'function'
+    && constructor instanceof constructor
+    && fnToString(constructor) === fnToString(Object);
 }

src/utils/wrapActionCreators.js

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