Working example for new API

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);
 
-console.log(ngRedux);
-
 bootstrap(
   App,
-  [ngRedux(store)]
-);
+  [createRedux(store)]
+  );

src/connector.js

@@ -8,10 +8,10 @@ export default class Connector {
   constructor(store) {
     this._store = store;
     this._defaultMapStateToTarget = () => ({});
-    this._defaultMapDispatchToTarget = dispatch => ({dispatch});
+    this._defaultMapDispatchToTarget = dispatch => ({ dispatch });
   }
 
-  connect(mapStateToTarget, mapDispatchToTarget) {
+  connect = (mapStateToTarget, mapDispatchToTarget) => {
 
     const finalMapStateToTarget = mapStateToTarget || this._defaultMapStateToTarget;
 
@@ -56,24 +56,24 @@ export default class Connector {
   }
 
 
- updateTarget(target, StateSlice, dispatch) {
-  if(_.isFunction(target)) {
-    target(StateSlice, dispatch);
-  } else {
-    _.assign(target, StateSlice, dispatch);
+  updateTarget(target, StateSlice, dispatch) {
+    if (_.isFunction(target)) {
+      target(StateSlice, dispatch);
+    } else {
+      _.assign(target, StateSlice, dispatch);
+    }
   }
-}
 
- getStateSlice(state, mapStateToScope) {
-  const slice = mapStateToScope(state);
+  getStateSlice(state, mapStateToScope) {
+    const slice = mapStateToScope(state);
 
-  invariant(
-    _.isPlainObject(slice),
-    '`mapStateToScope` must return an object. Instead received %s.',
-    slice
-    );
+    invariant(
+      _.isPlainObject(slice),
+      '`mapStateToScope` must return an object. Instead received %s.',
+      slice
+      );
 
-  return slice;
-}
+    return slice;
+  }
 
 }

src/index.js

@@ -1,31 +1,32 @@
 import Connector from './connector';
 import {bind, Injector} from 'angular2/di';
-let redux = import('redux');
+let redux = require('redux');
 
 export function createRedux(store) {
   const _connector = new Connector(store);
 
   return bind('ngRedux').toFactory(() => {
-    return {connect: _connector.connect, ...store};
+    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)) 
+    _.forEach(middlewares, middleware => {
+        _.isString(middleware)
+            ? resolvedMiddlewares.push(Injector.resolve(middleware))
             : resolvedMiddlewares.push(middleware)
     });
-    
+
     return redux.applyMiddleware(...resolvedMiddlewares);
 }
+*/