angular-redux / store Goto Github PK

That way we're not suggesting a dev dependency on React.

Sorry if I am being dense but I have extended your example into an app where I can sucessfully display the value of a part of my state if its simple number for example:

//in my initial state
{
dashboard:0
}

// In my component 
  ngOnInit() {
    this.unsubscribe = this.ngRedux.subscribe(() => {
        this.applicationRef.tick();
    });
    this.dashboard = this.ngRedux
            .select(state => state.dashboard);
}

 <h2>{{ dashboard | async }}</h2>

This works fine and I see 0 on the page. However if I make the object more complex such as:

const initialState = {
   dashboard:{
      currentRobot:{
        name:"Robot Name" 
      }
   }
}

<h2>{{ dashboard.currentRobot.name | async }}</h2>

With the same component this doesn't work... I feel I just don't understand rxjs and I have spent the last 45 minutes trying to find an answer to how to do this and haven't had any luck.

Im so close to implementing redux in Angular2 (having done it in reactjs before) and would love some help!

I'm using SystemJS and gulp to build an Angular2 rc0 app. Seeing this error from the invariant dependency:

localhost/:25 Error: ReferenceError: process is not defined at Object.eval (http://localhost:3001/node_modules/invariant/invariant.js:23:16) at eval (http://localhost:3001/node_modules/invariant/invariant.js:55:4) at eval (http://localhost:3001/node_modules/invariant/invariant.js:56:3) at Object.eval (http://localhost:3001/node_modules/ng2-redux/lib/components/ng-redux.js:14:17) Evaluating http://localhost:3001/node_modules/invariant/invariant.js Evaluating http://localhost:3001/node_modules/ng2-redux/lib/components/ng-redux.js Evaluating http://localhost:3001/node_modules/ng2-redux/lib/components/provider.js Evaluating http://localhost:3001/node_modules/ng2-redux/lib/index.js

Not sure how to satisfy this dependency.

A question about how to call angular service function on container.

When I try to call a "service map to redux" function on container, I get this error =>

EXCEPTION: Error: Actions must be plain objects. Use custom middleware for async actions. in [null]

code is like:

this.ngRedux.mapDispatchToTarget((dispatch)=> {
      return {
        fetchToday: ()=>dispatch(
          this._service.fetch()
        )
      };
    })(this);
this.fetchToday();

Service function code is simply as

return (dispatch, getState)=> {
      dispatch(FETCH_TODAY_ACTIVITIES);
    }

where FETCH_TODAY_ACTIVITIES is a string

Hi @wbuchwalter
Getting this ERROR in ./~/ng2-redux/lib/components/provider.js Module not found: Error: Cannot resolve module 'angular2/angular2' in ...node_modules/ng2-redux/lib/components @ ./~/ng2-redux/lib/components/provider.js 15:24-52 when angular 2 version is .53

Any plan to fix this soon? Solution would be replace angular2/angular2 with angular2/core

Angular2 RC4 was released and this package has a hard peer dependency on RC3. This causes npm@3 to print warnings and npm@2 to error out when using this lib with RC4.
Please bump the peer dependency to resolve this problem.

rm -rf typings; node_modules/.bin/typings install:

typings WARN deprecated 3/17/2016, 8:06:54 AM: "registry:dt/invariant#2.2.0+20160118023809" has been deprecated
typings WARN deprecated 4/27/2016, 3:33:36 PM: "registry:npm/sinon#1.16.0+20160309002336" has been deprecated
typings WARN deprecated 4/15/2016, 2:02:38 AM: "registry:npm/chai#3.5.0+20160402210230" has been deprecated
typings WARN deprecated 4/27/2016, 3:33:36 PM: "registry:npm/sinon#1.16.0+20160309002336" has been deprecated (used by "registry:npm/sinon-chai#2.8.0+20160310030142")
typings WARN deprecated 4/15/2016, 2:02:38 AM: "registry:npm/chai#3.4.0+20160308201903" has been deprecated (used by "registry:npm/sinon-chai#2.8.0+20160310030142")
typings WARN deprecated 3/17/2016, 8:06:54 AM: "registry:dt/es6-shim#0.31.2+20160215162030" has been deprecated

Would be good to clean this up at some point.

The folder test is in github - probably should be added to .gitignore

@SethDavenport, @bennett000 - as discussed at ng-Conf, I have created a slightly more complex example than the counter example supplied with ng2-redux. This one lets you enter a Github organization and displays the repositories associated with that organization. The Github project is located here. I have two implementations:

1. Angular2 only
2. Angular2 + ng2-redux

Unfortunately I am not able to get the ng2-redux implementation working. The actions are being dispatched correctly and the reducer is changing the state successfully. However the subscriptions are not being fired. Here's a console log of what I am seeing:

// This stuff is happening on app initialization
reducer - action: Object {type: "@@redux/INIT"}
reducer - curState: Object {orgName: null, errorMessage: null, repos: Array[0]}
reducer - nxtState: Object {orgName: null, errorMessage: null, repos: Array[0]}
reducer - action: Object {type: "@@redux/PROBE_UNKNOWN_ACTION_w.m.l.x.n.o.j.q.1.7.m.b.n.s.c.0.i.z.f.r"}
reducer - curState: Object {orgName: null, errorMessage: null, repos: Array[0]}
reducer - nxtState: Object {orgName: null, errorMessage: null, repos: Array[0]}
reducer - action: Object {type: "@@redux/INIT"}
reducer - curState: Object {orgName: null, errorMessage: null, repos: Array[0]}
reducer - nxtState: Object {orgName: null, errorMessage: null, repos: Array[0]}
----- orgNameSubscription -----
orgname: undefined
state.orgName: undefined
----- errorMessageSubscription -----
errorMessage: undefined
state.errorMessage: undefined
----- reposSubscription -----
repos: undefined
state.repos: undefined

// When I submit the form with orgName = "archfirst" the reducer is being called correctly
reducer - action: Object {type: "CHANGE_ORG_NAME", orgName: "archfirst"}
reducer - curState: Object {orgName: null, errorMessage: null, repos: Array[0]}
reducer - nxtState: Object {orgName: "archfirst", errorMessage: null, repos: Array[0]}

// However after this I see no call to orgNameSubscription

Would you be able to look at the implementation and tell me where I am going wrong? If we can get this working it would be a good second example for ng2-redux users. Thanks in advance for your time.

I think there could be some potential for property decorators to be useful.

proposed use:

import { someSelector } from './selectors';
export class MyComponent {
    @Select('count') count$: Observable<int>;
// same as this.count$ = this.ngRedux.select('count')
   @Select(someSelector) complexThing$: Observable<ISomething>
}

// note configureStore() is from https://github.com/rangle/angular2-redux-starter/blob/master/src/store/configure-store.ts#L12
import {bootstrap } from '@angular/platform-browser-dynamic';
import { provider  } from 'ng2-redux';
bootstrap(App, [
  provider(configureStore())
]);

it causes angular to throw the following on bootstrap

Uncaught Invalid provider - only instances of Provider and Type are allowed, got: [object Object]

In the counter example, we have our reducer like Redux explains us to have:

export default (state:number = 0, action:any) => {
  ...
}

the problem is that Webstorm complains about having a required parameter after an optional one. It is not like it is optional, it is more as a default value in case of undefined.

Still, I guess it is right, we shouldn't do that (nor Redux) should do it.

Now my editor is all about red wiggles.

This is a question that comes up pretty frequently - as discussed with @e-schultz we could provide an example in the readme or similar.

proposed use:

import { CounterActions } from '../actions';
@Component(....)
@dispatchAll(CounterActions)
export class MyComponent { 
}

IMO: #86 is more important - I like how explicit the in-class @dispatch is for making it clear what methods you have... this sort of 'hides stuff away' a bit, and not clear what methods end up being added.

I'm using ng2-redux version 2.3.3 with Ionic2, Angular 2 RC2 and ImmutableJS.

I'm trying to display a list of items and open a single item to a new ionic page. As an example, lets say I have list of blog posts in an Ionic2 page component. When the user selects a post, it transitions to a page displaying the "show" page. From here they can Edit the post in a popup Modal. When the post is saved, the Modal is closed and the "show" page is displayed again. I want the post to be loaded by an observable so any change to the post will show up automatically.

Here's the sample data-structure (Immutable js).

The state would look like this...

Map<string, any>({
  posts: Map<string, Post>({})
})

The idea is that it tracks the posts like a hash with the ID as the key and the object as the value. Making accessing a specific item in the list faster, since I expect several hundred items to thousands in the list. Expressing this in simple javascript might look like this.

let state = {
  posts: {"1": {id: "1", title: "Hello World"}}
}

Where a Post is defined as:

export const PostRecord = Record({
  id: null,
  title: "",
  author: "",
  published: false,
  body: null
});
export class Post extends PostRecord {
  id: string;
  title: string;
  author: string;
  published: boolean;
  body: string;

  constructor(props) {
    super(props);
  }
}

So I thought I could pass the ID of the post to display to the show page and try and subscribe to that change.

@Component({
  templateUrl: 'build/pages/settings/posts/post-page.html',
  pipes: [AsyncPipe],
})
export class PostPage {
  post$: Observable<any>;
  post: Post;

  constructor(private params: NavParams, private ngRedux: NgRedux<StoreType>) {}

  ngOnInit() {
    // this correctly gets the desired post, but it isn't being "observed"
    this.post = this.ngRedux.getState().getIn(["posts", this.params.get("post_id")])

    // this doesn't execute the state function...
    this.post$ = this.ngRedux.select(state => {
      debugger
      return state.get("posts").get(this.params.get("post_id")
    )});
  }

I've tried every way of expressing this I can think of. However, the "select" function isn't even being executed. I'm sure I'm misunderstanding something.

Do you have any tips or pointers? Am I going about this the wrong way?

EDIT: Fixed "zone$" to "post$" for my sample code. Later comment references it as "zone$"

Is there a way to provide a /dist folder for integrating with angular-cli projects? Because of the mapping associated with the angular-cli build, its really difficult to use the ng2-redux package, specifically its dependency on lodash and the mapping of rxjs within the src files (the angular-cli uses rxjs/Rx).

Hi,

I am fairly new to Angular 2 and ng2-redux so I want to apologize upfront if I just oversaw a small thing. I have a small Angular 2 app and recently integrated ng2-redux which worked like a charm. So mapping of state and dispatch works as expected and I basically followed the README step by step and the store changes are perfectly reflected. 👍

I started creating a spec (based on Jasmine) for the app component I connected via ng2-redux and executing the tests via Karma are running into the following issue:

Failed: No provider for ngRedux! (App -> ngRedux)

I tried several things and also tried to find my way through a lot of documentation but can't seem to find the right solution. From what I understand I need to pass either a proper implementation or mock here:

// provide our implementations or mocks to the dependency injector
beforeEachProviders(() => [
  App
]);

I tried duplicating the conditions for the main bootstrap but when I do so (or any other way) there is an error occurring at _instantiateProvider in the injector.ts of angular 2 (no specific error message though). Am I missing something? Can you help me or is this the wrong place to ask this question? I found nearly no documentation about adding a provider for the ngRedux factory or factories in general (hope I use the proper wording here).

Thanks and regards,
Tobias

I went through the instructions on the Angular 2 website in the 5 minute quickstart -

https://angular.io/docs/ts/latest/quickstart.html

It all works fine and I can see the page showing My First Angular 2 App.

I then npm install --save ng2-redux and it looks like everything works ok and ng2-redux appears in node_modules.

When I try to bootstrap ng2-redux by

import { NgRedux } from 'ng2-redux';
bootstrap(App, [ NgRedux ]);

I get Error loading http://localhost:3000/ng2-redux as "ng2-redux" from http://localhost:3000/app/main.js in the browser.

I've gone over my installation a few times and I can't see anything I've done wrong but could someone give me a suggestion as how to fix this please because I really want to use redux with Angular 2.

Thanks

Hello,
I have some problem with the call orders of Observable.

My case:
I have 2 components, Comp1 and Comp2.
Comp1 is a text search component.
Comp2 is a display of a text.

Comp1 and Comp2 share the same reducer, with the following state:
{ match: number, search_element: string }

Comp1 dispatches Action1 when user enter text in input. Payload is the text and updates search_element.

Comp2 subscribe to search_element. It dispatches Action2 with the number of match in the payload, updates math in the state.

Comp1 subscribe to match.

The problem is subscribe to march is called twice.
First with the value from Comp2 and second from the initial value coming from Action1.

Comp1 displays the wrong match.

I don't understand why subscribe to match is called first with "state2" and then with "state1".

I had to add another flag, search_text_updated, to update match only with state2 value.

Do you have any clue if this is a normal behaviour, for chaining actions?

I will try to create an example to reproduce the issue.

Thanks,

Pierre

Any plans to add router state like in ng-ui-router?

They've decided to bubble all events, so they've removed the (^ syntax. So in ./components/Counter.ts the HTML should be:

    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
    <button (click)="incrementIfOdd()">Increment if odd</button>
    <button (click)="incrementAsync()">Increment async</button>

I'm using Socket.io to get data pushed in from the server and I'm manually running store.dispatch(action(socketIODate)). I can see that it is going into the reducer and adding the data to the state. It's even calling the attached mapState method in my container. It just won't update the DOM. I'm guessing it's something I'm missing with Angular2's change detection, but I'm not quite sure what it is.

Could you please provide some guidance to integrate ng2-redux with angular2-seed. My first question is how to initialize ng2-redux in the angular2-seed's AppComponent instead of bootstrap()? In angular2-seed, bootstrap() is not as accessible.

Hey, thinking of trying this out for ng2 project. Will this work with latest redux 2.0?

I wrote a wrapper using your connect, inside my own store.js file...

...
import Connector from 'ng2-redux/lib/components/connector'

export function Store(reduxStore) {
  const __connector = new Connector(reduxStore);
  return {
    ...reduxStore,
    connect: __connector.connect
  };
}
...
export function createStore() {
  ...
  return Store(createStoreWithMiddleware(reducer, state));
}

Then in my index.js ...

import {Store, createStore} from './store';
...
bootstrap(App, [
  provide(Store, { useValue: createStore() }),
  ...
]);

This way, in my components, I only need constructor(store:Store) to get the store reference, which works with babel/es6 as well as the preferred use for ng2.

Yes, it's explicit and one step removed from the provider, however, it allows for easier integration at the component level... not sure if the provider itself could be changed to support a type reference, but it would be nicer than poluting my constructors with @Inject

Maybe if you separated Connector, and its' dependencies into an ng2-redux-connector module, so it can be used more easily? Either with the provider method this module uses, or the more explicit method I used.

can't get the example to run.

npm install
tsd reinstall
npm start

and I'm getting:

> [email protected] start /Users/xavi/Projects/ng2-redux/examples/counter
> node server.js

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:3000
    at Object.exports._errnoException (util.js:874:11)
    at exports._exceptionWithHostPort (util.js:897:20)
    at Server._listen2 (net.js:1234:14)
    at listen (net.js:1270:10)
    at net.js:1379:9
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:63:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:82:10)

npm ERR! Darwin 15.0.0
npm ERR! argv "/Users/xavi/.nvm/versions/node/v4.2.2/bin/node" "/Users/xavi/.nvm/versions/node/v4.2.2/bin/npm" "start"
npm ERR! node v4.2.2
npm ERR! npm  v2.14.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'node server.js'.
npm ERR! This is most likely a problem with the counter-redux package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node server.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls counter-redux
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/xavi/Projects/ng2-redux/examples/counter/npm-debug.log

what am i doing wrong?

cd ng2-redux/
npm i
cd ng2-redux/examples/counter
npm i

Getting lots of error like:

ERROR in /path/to/ng2-redux/examples/counter/node_modules/@angular/platform-browser/core_private.d.ts
(13,40): error TS2339: Property 'reflector' does not exist on type 'typeof __core_private_types__'.

ERROR in /path/to/ng2-redux/examples/counter/node_modules/@angular/platform-browser/core_private.d.ts
(14,45): error TS2305: Module '"/path/to/ng2-redux/examples/counter/node_modules/@angular/core/private_export".__core_private_types__' has no exported member 'NoOpAnimationPlayer'.

Updated the following inside package.json:

"@angular/core": "2.0.0-rc.1", => "@angular/core": "2.0.0-rc.2",
"ng2-redux": "^2.3.1", => "ng2-redux": "^3.0.7",

npm i

Now only getting 2 errors:

ERROR in ./reducers/index.ts
(3,27): error TS2307: Cannot find module '../store/configureStore'.

ERROR in ./components/CounterInfo.ts
(26,35): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.

These can be easily fixed:

./reducers/index.ts

import { RootState } from '../store/configureStore';

changed to

import { RootState } from '../store';

./components/CounterInfo.ts

this.counterX2$.combineLatest(this.stringKey$, (x, y) => {

changed to

this.counterX2$.combineLatest(this.stringKey$, (x: any, y: any) => {

Now the counter example works beautifully. Hope this is helpful.

ERROR in ./~/ng2-redux/lib/components/provider.js
Module not found: Error: Cannot resolve module 'angular2/di' ...
needs to be either angular2/angular2 (which exportd angular2/core/di')

Typings 1.0.x has breaking changes to the way typings.json works. We should adjust to them.

Hey,

just a minor thing. Might not even be worth mentioning it in the README. When using the source-map-loader to extract source maps without any excludes ng2-redux 2.2.3 displays warnings.

WARNING in ./~/ng2-redux/lib/index.js
Cannot find source file '../src/index.ts': Error: Cannot resolve 'file' or 'directory' ../src/index.ts in /vagrant/styleguide/node_modules/ng2-redux/lib

WARNING in ./~/ng2-redux/lib/components/provider.js
Cannot find source file '../../src/components/provider.ts': Error: Cannot resolve 'file' or 'directory' ../../src/components/provider.ts in /vagrant/app/node_modules/ng2-redux/lib/components

WARNING in ./~/ng2-redux/lib/components/ng-redux.js
Cannot find source file '../../src/components/ng-redux.ts': Error: Cannot resolve 'file' or 'directory' ../../src/components/ng-redux.ts in /vagrant/app/node_modules/ng2-redux/lib/components

WARNING in ./~/ng2-redux/lib/utils/shallowEqual.js
Cannot find source file '../../src/utils/shallowEqual.ts': Error: Cannot resolve 'file' or 'directory' ../../src/utils/shallowEqual.ts in /vagrant/app/node_modules/ng2-redux/lib/utils

WARNING in ./~/ng2-redux/lib/utils/wrapActionCreators.js
Cannot find source file '../../src/utils/wrapActionCreators.ts': Error: Cannot resolve 'file' or 'directory' ../../src/utils/wrapActionCreators.ts in /vagrant/app/node_modules/ng2-redux/lib/utils

The app still works. To avoid the warnings it can be simply excluded.

test: /\.js$/,
loader: 'source-map-loader',
exclude: [
  /node_modules\/ng2-redux/
]

Cheers,
Tobi

After npm install from example folder, on npm start I have errors:

• [ts] Module '"... ng2-redux/lib/index"' has no exported member 'select'
• [ts] Property 'configureStore' does not exist on type 'NgRedux<RootState>'

I did not change the code from example.

Decorator that is similar to @select, but will also do the subscription instead of exposing the observable.

@Component({
template: `{{counter$ | async}} - {{counter}}`
})
export class MyComponent {
  @select('counter') counter$;
  @subscribe('counter') counter;
}

instead of doing

@Component({
template: `{{counter$ | async}} - {{counter}}`
})
export class MyComponent {
  @select('counter') counter$;
  counterSub;
    ngOnInit() {
    this.counterSub = this.counter$.subscribe(n=>this.counter=n);
  }
  ngOnDestroy() { 
    this.counterSub.unsubscribe();    
  }
}

think I'd rather stick with just @select for now, but open to feedback/discussion on this.

We work great with the redux devtools bundled as a chrome extension.

However some community members have requested a quick doc on how to use them with the sample app.

A recorded screen session might be in order.

• cd ng2-redux/
• npm install
• cd ng2-redux/examples/counter
• npm install

got:

npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/Cellar/node/4.2.1/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.2.1
npm ERR! npm  v2.14.7
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]

changed package.json: "reflect-metadata": "^0.1.2", => "reflect-metadata": "0.1.2",

• npm install

got:

npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/Cellar/node/4.2.1/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.2.1
npm ERR! npm  v2.14.7
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]

changed package.json: "rxjs": "5.0.0-beta.0", => "rxjs": "5.0.0-beta.2",

• npm install
• npm start

got:

ERROR in multi main
Module not found: Error: Cannot resolve module 'ts' in /Users/lukasz/Sites/ng2-redux/examples/counter
@ multi main

ERROR in ./vendor.js
Module not found: Error: Cannot resolve module 'core-js' in /Users/lukasz/Sites/ng2-redux/examples/counter
@ ./vendor.js 4:0-18
webpack: bundle is now VALID.

• npm install typings --global
• npm start

got

npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/Cellar/node/4.2.1/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.2.1
npm ERR! npm  v2.14.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'node server.js'.
npm ERR! This is most likely a problem with the counter-redux package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node server.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls counter-redux
npm ERR! There is likely additional logging output above.

Could anyone point what I'm doing wrong?

Because redux is put as devDependencies every user of ng2-redux need to add redux as dependency.

Is there a reason for that ?

I had created a decorator that allowed a component to automatically subscribe and unsubscribe from the Redux application store on the Angular2 life cycle hooks.

https://github.com/ng-cookbook/angular2-redux-complex-ui/blob/master/src/app/decorators/app-store-subscriber.ts

Would it make sense to incorporate a similar directive into this library (using the ngRedux.connect method)?

Not our problem per-se but it would be nice to have some kind of solution.

Can we update the DT typings for redux-thunk? Make a PR against them to redux-thunk itself?

You could generate a definition file and serve it along the npm package. Then you can use $ tsd link to use it in your project.

ng-redux for Angular 1 supports DI for middleware, would like to get the same functionality here.

Prior art/other examples:
ngrs/Store and how they handle middleware
angular2-redux - although don't think this lets middleware use DI
ng-redux

Thinking so we can still keep with the provide(store), maybe something like:

import { provide, createStoreWith } from 'ng2-redux'

let store = createStoreWith(reducer,middleware,storeEnhancer, initialState)
bootstrap(App,provide(store));

or

import thunk from 'redux-thunk'
import someProviderMW from 'some-provider-mw'

let store = createStoreWith(reducer,[thunk,someProviderMW])
bootstrap(App,provide(store));

Then - if the middleware is just a function - push it into the middleware array, if the middleware is an instance of a provider - use the injector to create an instance of it, then push it onto the middleware collection.

use case: making a middleware that needs access to Angular's HTTP service,

Hi,

it is me again with Unit test issues using ng2-redux. Updating to version 3 is very cool using the select decorator.

However, for my unit tests I tried to inject NgRedux as I do with every injectable via beforeEachProviders because else the tests complained about "No provider for NgRedux!". After adding NgRedux the tests complains about "Platforms have to be created via createPlatform!"

Any idea? This only happens in unit tests. The app itself runs fine. Unfortunately I found no particular information about the issue with createPlatform and also I found no example of tests when using NgRedux 3.x

My component:

import {
  Component,
  ViewChild
} from '@angular/core';

import { NgRedux } from 'ng2-redux';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'feed',
  styles: [ '' ],
  template: 'test'
})
export class Feed {
  constructor(private redux: NgRedux<any>) {}
}

My test:

import {
  it,
  describe,
  inject,
  beforeEach,
  beforeEachProviders
} from '@angular/core/testing';

import { TestComponentBuilder } from '@angular/compiler/testing';

import { NgRedux } from 'ng2-redux';

import { Feed } from './feed.component';

describe('Feed: Component', () => {
  let tcb, graphQL;

  // setup
  beforeEachProviders(() => [
    NgRedux,
    TestComponentBuilder
  ]);

  beforeEach(
    inject(
      [TestComponentBuilder], (_tcb) => {
        tcb = _tcb;
      }
    )
  );

  describe('initial state', () => {
    it('should have proper initial state', done => {
      tcb
        .createAsync(Feed).then(fixture => {
          const component = fixture.componentInstance;
          expect(true).toBe(true);
          done();
        })
        .catch(e => done.fail(e));
    });
  });
});

Cheers

When an action is dispatched during a component Lifecycle Hook like ngOnInit or ngAfterContentInit an exception is thrown. The message of the error is this.

ApplicationRef.tick is called recursively

I have a store where all my "cards" data objects are stored. In a detail view i only want to show cards that are assigned to a specific set. I'm pretty new to rx and reudx but shouldnt this work?
Subscribe never gets called, pbl because toArray waits for "done". Or is my approach just wrong?

    @select('cards') cards$:any;
    ngOnInit(){
        this.cards$
            .flatMap(s => s)
            .filter(card => card.setId === "someId" )
            .toArray()
            .subscribe(cards => {
                this.cards = cards
            });
    }
    ngOnDestroy() {
            this.cards$.unsubscribe();
    }

would it fulfill the redux approach better if i create a temporary store for the filtered cards and keep them there?

example use:

import { someAction } from '../actions';
export class MyComponent {
@dispatch(someAction) someAction: ()=void;
}

As a developer using the ng2-redux library
I want to be able to decorate a constructor parameter
So that I can quickly, with minimum code footprint attach dispatched actions from the ActionCreatorService instance contained in that parameter to my Angular 2 Component/Injectable class

Subtasks here would be:

• assess cross requirements with the Injectable Action Services pattern
• write specs
• write example usage in example app
• implement the decorator
• update docs

Create a property decorator that exposes the ngRedux.select.

Proposed use:

export class MyComponent { 
@select() counter$: Observable<int>; // picks up 'state.counter'
@select() counter: Observable<int>; // picks up 'state.counter'
@select('counter') someProp;   // picks up 'state.counter'
@select(state=>state.counter) propFromSelector: Observable<int>;
}

I've successfully gotten the chrome extension dev tools to work with ng2-redux. However I had to include this hack in my top-level component:

  constructor(ngRedux: NgRedux<IAppState>) {
      // ...

      this.unsubscribe = ngRedux.subscribe(() => {
        applicationRef.tick();
      });
    }

  ngOnDestroy() {
    this.unsubscribe();
  }

Hi @wbuchwalter. Just wander does current ng2-redux support redux-devtools v3.0.1? If so could you update the example?

The counter example doesn't work with .37.

Reducers are called, state changes but that change never hits the App component again so counter is always 0.

Tried to update it, but I think it is a problem with ng2-redux itself.