First draft of new api, not functional

Author: wbuchwalter

examples/counter/index.js

@@ -3,15 +3,15 @@ import {bind} from 'angular2/di';
 import {createStore, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import {App} from './containers/App';
-import {ngRedux} from  'ng2-redux';
+import ngRedux from  'ng2-redux';
 import {rootReducer} from './reducers';
 
 const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
 const store = createStoreWithMiddleware(rootReducer);
 
+console.log(ngRedux);
+
 bootstrap(
   App,
-  [bind('ngRedux').toFactory(() => {
-   	return new ngRedux(store);
-   })]
+  [ngRedux(store)]
 );

examples/counter/webpack.config.js

@@ -2,7 +2,7 @@ var path = require('path');
 var webpack = require('webpack');
 
 module.exports = {
-  devtool: 'eval',
+  devtool: 'source-map',
   entry: [
     // Angular 2 Deps
     'zone.js',

package.json

@@ -33,6 +33,7 @@
     "redux": "^1.0.0 || 1.0.0-alpha || 1.0.0-rc"
   },
   "dependencies": {
+    "angular2": "^2.0.0-alpha.30",
     "invariant": "^2.1.0",
     "lodash": "^3.10.1"
   }

src/connector.js

@@ -1,38 +1,79 @@
 import shallowEqual from './utils/shallowEqual';
+import wrapActionCreators from './utils/wrapActionCreators';
+import invariant from 'invariant';
+import _ from 'lodash';
 
 export default class Connector {
 
   constructor(store) {
-    this.store = store;
-    this.unsubscribe = undefined;
+    this._store = store;
+    this._defaultMapStateToTarget = () => ({});
+    this._defaultMapDispatchToTarget = dispatch => ({dispatch});
   }
 
-  disconnect() {
-    this.unsubscribe();
-  }
+  connect(mapStateToTarget, mapDispatchToTarget) {
 
-  connect(selectors, callback, disableCaching = false) {
-    if (!Array.isArray(selectors)) {
-      selectors = [selectors];
-    }
+    const finalMapStateToTarget = mapStateToTarget || this._defaultMapStateToTarget;
+
+    const finalMapDispatchToTarget = _.isPlainObject(mapDispatchToTarget) ?
+      wrapActionCreators(mapDispatchToTarget) :
+      mapDispatchToTarget || this._defaultMapDispatchToTarget;
+
+    invariant(
+      _.isFunction(finalMapStateToTarget),
+      'mapStateToTarget must be a Function. Instead received $s.', finalMapStateToTarget
+      );
+
+    invariant(
+      _.isPlainObject(finalMapDispatchToTarget) || _.isFunction(finalMapDispatchToTarget),
+      'mapDispatchToTarget must be a plain Object or a Function. Instead received $s.', finalMapDispatchToTarget
+      );
+
+    let slice = this.getStateSlice(this._store.getState(), finalMapStateToTarget);
+
+    const boundActionCreators = finalMapDispatchToTarget(this._store.dispatch);
 
-    //Initial update
-    let params = selectors.map(selector => selector(this.store.getState()));
-    callback(...params);
+    return (target) => {
 
-    this.unsubscribe = this.store.subscribe(() => {
-      let nextParams = selectors.map(selector => selector(this.store.getState()));
-      if (disableCaching || !shallowEqual(params, nextParams)) {
-        callback(...nextParams);
-        params = nextParams;
-      }
-    });
+      invariant(
+        _.isFunction(target) || _.isObject(target),
+        'The target parameter passed to connect must be a Function or a plain object.'
+        );
+
+      //Initial update
+      this.updateTarget(target, slice, boundActionCreators);
+
+      const unsubscribe = this._store.subscribe(() => {
+        const nextSlice = this.getStateSlice(this._store.getState(), finalMapStateToTarget);
+        if (!shallowEqual(slice, nextSlice)) {
+          slice = nextSlice;
+          this.updateTarget(target, slice, boundActionCreators);
+        }
+      });
+      return unsubscribe;
+    }
 
-    return this;
   }
 
-  getStore() {
-    return this.store;
+
+ updateTarget(target, StateSlice, dispatch) {
+  if(_.isFunction(target)) {
+    target(StateSlice, dispatch);
+  } else {
+    _.assign(target, StateSlice, dispatch);
   }
+}
+
+ getStateSlice(state, mapStateToScope) {
+  const slice = mapStateToScope(state);
+
+  invariant(
+    _.isPlainObject(slice),
+    '`mapStateToScope` must return an object. Instead received %s.',
+    slice
+    );
+
+  return slice;
+}
 
 }

src/index.js

@@ -1 +1,12 @@
-export {default as ngRedux} from './connector';
+import Connector from './connector';
+import {bind} from 'angular2/di';
+
+export default function createRedux(store) {
+  const _connector = new Connector(store);
+
+  return bind('ngRedux').toFactory(() => {
+    return {connect: _connector.connect, ...store};
+  });
+}
+
+