Merge pull request #2 from wbuchwalter/bc-1.0.0

Breaking changes

Author: wbuchwalter

examples/counter/containers/CounterApp.ts

@@ -2,7 +2,7 @@ import {Component, View, onInit, onDestroy} from 'angular2/angular2';
 import {bindActionCreators} from 'redux';
 import {Counter} from '../components/Counter';
 import * as CounterActions from '../actions/CounterActions';
-import  Connector from '../redux/connector';
+import Connector from '../redux/connector';
 import { Inject } from 'angular2/di';
 
 @Component({
@@ -11,28 +11,29 @@ import { Inject } from 'angular2/di';
   bindings: []
 })
 @View({
-  directives: [ Counter ],
+  directives: [Counter],
   template: `
   <counter [counter]="counter" [actions]="actions"></counter>
   `
 })
 export class CounterApp {
-  actions: any;
-  unsubscribe: Function;
-  counter;
-  _ngRedux;
-
-  constructor(@Inject('ngRedux') ngRedux) {
-    this._ngRedux = ngRedux;
-    ngRedux.connect(state => state.counter, counter => this.counter = counter, true);
+  constructor( @Inject('ngRedux') ngRedux) {
+    this.unsubscribe = ngRedux.connect(this.mapStateToScope, this.mapDispatchToProps)(this);
   }
 
+  onInit() {}
 
-  onInit() {
-    this.actions = bindActionCreators(CounterActions, this._ngRedux.getStore().dispatch);
+  onDestroy() {
+    this.unsubscribe();
   }
 
-  onDestroy() {
-    this._ngRedux.disconnect();
+  mapStateToScope(state) {
+    return {
+      counter: state.counter
+    };
+  }
+
+  mapDispatchToProps(dispatch) {
+    return { actions: bindActionCreators(CounterActions, dispatch) };
   }
 }

examples/counter/index.js

@@ -3,15 +3,13 @@ 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 {createRedux} from  'ng2-redux';
 import {rootReducer} from './reducers';
 
 const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
 const store = createStoreWithMiddleware(rootReducer);
 
 bootstrap(
   App,
-  [bind('ngRedux').toFactory(() => {
-   	return new ngRedux(store);
-   })]
-);
+  [createRedux(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',

npm-debug.log

@@ -1,6 +1,6 @@
 {
   "name": "ng2-redux",
-  "version": "0.0.1",
+  "version": "2.0.0-alpha",
   "description": "Angular 2 bindings for Redux",
   "main": "./lib/index.js",
   "scripts": {
@@ -33,6 +33,8 @@
     "redux": "^1.0.0 || 1.0.0-alpha || 1.0.0-rc"
   },
   "dependencies": {
-    "invariant": "^2.1.0"
+    "angular2": "^2.0.0-alpha.30",
+    "invariant": "^2.1.0",
+    "lodash": "^3.10.1"
   }
 }

package.json

@@ -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) => {
+
+    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);
 
-  connect(selectors, callback, disableCaching = false) {
-    if (!Array.isArray(selectors)) {
-      selectors = [selectors];
+    return (target) => {
+
+      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;
     }
 
-    //Initial update
-    let params = selectors.map(selector => selector(this.store.getState()));
-    callback(...params);
+  }
 
-    this.unsubscribe = this.store.subscribe(() => {
-      let nextParams = selectors.map(selector => selector(this.store.getState()));
-      if (disableCaching || !shallowEqual(params, nextParams)) {
-        callback(...nextParams);
-        params = nextParams;
-      }
-    });
 
-    return this;
+  updateTarget(target, StateSlice, dispatch) {
+    if (_.isFunction(target)) {
+      target(StateSlice, dispatch);
+    } else {
+      _.assign(target, StateSlice, dispatch);
+    }
   }
 
-  getStore() {
-    return this.store;
+  getStateSlice(state, mapStateToScope) {
+    const slice = mapStateToScope(state);
+
+    invariant(
+      _.isPlainObject(slice),
+      '`mapStateToScope` must return an object. Instead received %s.',
+      slice
+      );
+
+    return slice;
   }
 
 }

src/connector.js

@@ -1 +1,32 @@
-export {default as ngRedux} from './connector';
+import Connector from './connector';
+import {bind, Injector} from 'angular2/di';
+let redux = require('redux');
+
+export function createRedux(store) {
+  const _connector = new Connector(store);
+
+  return bind('ngRedux').toFactory(() => {
+    return { connect: _connector.connect, ...store};
+  });
+}
+
+
+/*
+ const createStoreWithMiddleware = applyInjectableMiddleware(thunk, 'promise')(createStore);
+*/
+/*
+export function applyInjectableMiddleware(middlewares) {
+    const injector = new Injector();
+    let resolvedMiddlewares = [];
+    _.forEach(middlewares, middleware => {
+        _.isString(middleware)
+            ? resolvedMiddlewares.push(Injector.resolve(middleware))
+            : resolvedMiddlewares.push(middleware)
+    });
+
+    return redux.applyMiddleware(...resolvedMiddlewares);
+}
+*/
+
+
+

src/index.js

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