Merge branch 'leoasis-react_native_support'

Author: acdlite

examples/containers/App.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import CounterApp from './CounterApp';
 import TodoApp from './TodoApp';
-import { createRedux, Provider } from 'redux';
+import { createRedux } from 'redux';
+import { Provider } from 'redux/react';
 import * as stores from '../stores';
 
 const redux = createRedux(stores);

examples/containers/CounterApp.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { connect, bindActionCreators } from 'redux';
+import { bindActionCreators } from 'redux';
+import { connect } from 'redux/react';
 import Counter from '../components/Counter';
 import * as CounterActions from '../actions/CounterActions';
 

examples/containers/TodoApp.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { bindActionCreators, Connector } from 'redux';
+import { bindActionCreators } from 'redux';
+import { Connector } from 'redux/react';
 import AddTodo from '../components/AddTodo';
 import TodoList from '../components/TodoList';
 import * as TodoActions from '../actions/TodoActions';

package.json

@@ -42,6 +42,7 @@
     "eslint-plugin-react": "^2.3.0",
     "expect": "^1.6.0",
     "mocha": "^2.2.5",
+    "react": "^0.13.0",
     "react-hot-loader": "^1.2.7",
     "rimraf": "^2.3.4",
     "webpack": "^1.9.6",
@@ -51,8 +52,7 @@
     "babel-runtime": "^5.4.7",
     "envify": "^3.4.0",
     "invariant": "^2.0.0",
-    "lodash": "^3.9.3",
-    "react": "^0.13.0"
+    "lodash": "^3.9.3"
   },
   "browserify": {
     "transform": [

react-native.js

@@ -0,0 +1 @@
+export * from './lib/react-native';

react.js

@@ -0,0 +1 @@
+export * from './lib/react';

src/components/Connector.js

@@ -0,0 +1,17 @@
+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);
+
+  return { Provider, Connector, provide, connect };
+}

src/components/Provider.js

@@ -0,0 +1,26 @@
+import getDisplayName from '../utils/getDisplayName';
+import shallowEqualScalar from '../utils/shallowEqualScalar';
+
+export default function createConnectDecorator(React, Connector) {
+  return function connect(select) {
+    return DecoratedComponent => class ConnectorDecorator {
+      static displayName = `Connector(${getDisplayName(DecoratedComponent)})`;
+
+      shouldComponentUpdate(nextProps) {
+        return !shallowEqualScalar(this.props, nextProps);
+      }
+
+      render() {
+        return (
+          <Connector select={state => select(state, this.props)}>
+            {this.renderChild}
+          </Connector>
+        );
+      }
+
+      renderChild(state) {
+        return <DecoratedComponent {...state} />;
+      }
+    };
+  };
+}

src/components/connect.js

@@ -0,0 +1,79 @@
+import identity from 'lodash/utility/identity';
+import shallowEqual from '../utils/shallowEqual';
+
+export default function createConnector(React) {
+
+  const { Component, PropTypes } = React;
+
+  return class Connector extends Component {
+    static contextTypes = {
+      redux: PropTypes.object.isRequired
+    };
+
+    static propTypes = {
+      children: PropTypes.func.isRequired,
+      select: PropTypes.func.isRequired
+    };
+
+    static defaultProps = {
+      select: identity
+    };
+
+    shouldComponentUpdate(nextProps, nextState) {
+      return !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;
+      } else {
+        return shallowEqual(slice, nextSlice);
+      }
+    }
+
+    constructor(props, context) {
+      super(props, context);
+
+      this.handleChange = this.handleChange.bind(this);
+      this.unsubscribe = context.redux.subscribe(this.handleChange);
+      this.handleChange();
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.select !== this.props.select) {
+        // Force the state slice recalculation
+        this.handleChange();
+      }
+    }
+
+    componentWillUnmount() {
+      this.unsubscribe();
+    }
+
+    handleChange() {
+      const state = this.context.redux.getState();
+      const slice = this.props.select(state);
+
+      if (this.state) {
+        this.setState({ slice });
+      } else {
+        this.state = { slice };
+      }
+    }
+
+    render() {
+      const { children } = this.props;
+      const { slice } = this.state;
+      const { redux } = this.context;
+
+      return children({
+        dispatch: ::redux.dispatch,
+        ...slice
+      });
+    }
+  };
+}

src/components/createAll.js

@@ -0,0 +1,17 @@
+import getDisplayName from '../utils/getDisplayName';
+
+export default function createProvideDecorator(React, Provider) {
+  return function provide(redux) {
+    return DecoratedComponent => class ProviderDecorator {
+      static displayName = `Provider(${getDisplayName(DecoratedComponent)})`;
+
+      render() {
+        return (
+          <Provider redux={redux}>
+            {props => <DecoratedComponent {...this.props} {...props} />}
+          </Provider>
+        );
+      }
+    };
+  };
+}

src/components/createConnectDecorator.js

@@ -0,0 +1,39 @@
+export default function createProvider(React) {
+  const { Component, PropTypes } = React;
+
+  const reduxShape = PropTypes.shape({
+    subscribe: PropTypes.func.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    getState: PropTypes.func.isRequired
+  });
+
+  return class Provider extends Component {
+    static propTypes = {
+      redux: reduxShape.isRequired,
+      children: PropTypes.func.isRequired
+    };
+
+    static childContextTypes = {
+      redux: reduxShape.isRequired
+    };
+
+    getChildContext() {
+      return { redux: this.state.redux };
+    }
+
+    constructor(props, context) {
+      super(props, context);
+      this.state = { redux: props.redux };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      const nextDispatcher = nextProps.redux.getDispatcher();
+      this.state.redux.replaceDispatcher(nextDispatcher);
+    }
+
+    render() {
+      const { children } = this.props;
+      return children();
+    }
+  };
+}