Platform: store.select not working => argument of type 'mystate' is not assignable to parameter of type.

[smatthews1999]

Having this issue every time I try to 'select' state instead of subscribe.

This is a simple example and I have followed setup of store and reducer closely...
On the other hand 'subscribing' works as expected...

"@ngrx/store": "^4.0.0",

[antonyRoberts]

@smatthews1999 Need to see how you're importing and exporting your reducers, because from what you've given there's not enough info other than to say you should not be getting store.select like that. In your case it should be
this.store.select(AppState.canvas)
but that would mean you are importing your reducers along these lines
import * as AppState from yourReducerFile and exporting just the state of the canvas from that file.

Also it looks like you're going to want canvas data async, so you may want to make use of Smart/Dumb style with containers and components and pipe the data in async from the smart component to the dumb ones.

Look at this setup in the example app for an idea of how things should flow
1) Reducer Index
2) Smart Container
3) Dumb Component

Any chance the example you're talking about is the counter example?

[smatthews1999]

Thanks for your response.
My usage of ngrx/store has thus far been a simple scenario of a single reducer, state object and actions. I have no need to go beyond that right now.
app.module

import { StoreModule } from '@ngrx/store';
...
 imports: [
    BrowserModule,
    FormsModule,
    StoreModule.forRoot({ state: CanvasReducer }),
  ],

reducer

import { Action } from '@ngrx/store';
import { Store } from '@ngrx/store'

export function CanvasReducer(state: AppState = initialState, action: Action):AppState {
  let newState = Object.assign({}, state);
  switch (action.type) {
    case SET_CANVAS_WIDTH: {
      newState.canvasWidth = (<SetCanvasWidthAction>action).width;
      return newState;
    }
    default: {
      return state; // unmodified
    }
  }

actions

import { Store } from '@ngrx/store'
import { AppState } from './reducer.service'

export class SetCanvasWidthAction implements Action {
  readonly type = SET_CANVAS_WIDTH;
  constructor(public width: number) { }
}
setCanvasWidth(width: number) {
    this.store.dispatch(new SetCanvasWidthAction(width));
  }

my component and subscribe to store

 constructor(private store: Store<any>) {

    store.subscribe((state) => {
      let s = state;
      this.appState = <AppState>s.state;
    });

This is what I am doing to get a typed AppState object (which is a bit more convoluted than 2.x).

[brandonroberts]

What does your AppState interface look like?

[MikeRyanDev]

Your problem is this line:

this.canvasState = this.store.select<AppState>('canvas');

You need to remove the generic type parameter from select and instead just do this:

this.canvasState = this.store.select('canvas');

The types should flow correctly since you've specified the generic type of Store.

See the type signature here

[smatthews1999]

@brandonroberts

export interface AppState {
  canvasWidth: number
}

[smatthews1999]

@MikeRyanDev
There is no way for me to create the Store without the type, and subsequently no way to refer to it w/o the type

[littleStudent]

constructor(private action: ActionService, private store: Store<AppState>) {
  this.appState = this.store.select('state');
}

probably take a look at the example.

[smatthews1999]

@littleStudent
I did look at the example on the main page...

export class MyAppComponent {
    counter: Observable<number>;

    constructor(private store: Store<AppState>) {
        this.counter = store.select<number>('counter');
    }
}

I am quite sure that it does not compile.

[RemotecUK]

This had me stumped for quite some time. What is wrong with the OPs code if the canvaswidth property is a number? Why does the typing to the number type not work when getting it from the store in this case?
Thanks.

[houmanka]

@smatthews1999 Have you found a solution for this?

[smatthews1999]

I am afraid not. I rolled back to 2.x. I asked this question several times and I kept getting answers like "your solution is not complicated enough... you need to use more cool features". I honestly don't get how they can put the code in the readme and it not work. I also don't understand how a defined typed object (the state) cannot be delivered as such (a typed object), but that's just me... I'm not an architect...just a lowly programmer.

[DeanHristov]

@smatthews1999 I have the same problem I fill a bit uncomfortable. Usually, in React this case can be solved a really easy. I can not understand why in AngularJS the most of things are so hard?

[brandonroberts]

@DeanHristov I'm not sure what issue you are having. Please provide an example so we can point you in the right direction.

[smatthews1999]

@houmanka My solution has been to use Mobx... sorry.