{"action":"created","issue":{"url":"https://api.github.com/repos/ngrx/store/issues/233","repository_url":"https://api.github.com/repos/ngrx/store","labels_url":"https://api.github.com/repos/ngrx/store/issues/233/labels{/name}","comments_url":"https://api.github.com/repos/ngrx/store/issues/233/comments","events_url":"https://api.github.com/repos/ngrx/store/issues/233/events","html_url":"https://github.com/ngrx/store/issues/233","id":179461860,"number":233,"title":"ImmutableJs not fully working (?)","user":{"login":"maxime1992","id":4950209,"avatar_url":"https://avatars.githubusercontent.com/u/4950209?v=3","gravatar_id":"","url":"https://api.github.com/users/maxime1992","html_url":"https://github.com/maxime1992","followers_url":"https://api.github.com/users/maxime1992/followers","following_url":"https://api.github.com/users/maxime1992/following{/other_user}","gists_url":"https://api.github.com/users/maxime1992/gists{/gist_id}","starred_url":"https://api.github.com/users/maxime1992/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maxime1992/subscriptions","organizations_url":"https://api.github.com/users/maxime1992/orgs","repos_url":"https://api.github.com/users/maxime1992/repos","events_url":"https://api.github.com/users/maxime1992/events{/privacy}","received_events_url":"https://api.github.com/users/maxime1992/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-09-27T11:01:34Z","updated_at":"2016-09-27T11:43:45Z","closed_at":null,"body":"Hi,\r\n\r\nI plan to use ngrx on a large application.\r\n\r\nI tried to build a reducer in order to handle a user : \r\n\r\n```javascript\r\nimport { ActionReducer, Action } from '@ngrx/store';\r\nimport { Map, fromJS } from 'immutable';\r\n\r\n// actions\r\nexport const USR_CONNECT = 'USR_CONNECT';\r\nexport const USR_DISCONNECT = 'USR_DISCONNECT';\r\n\r\ninterface IUser {\r\n  name?: string,\r\n  isConnected: boolean\r\n};\r\n\r\nlet initialUser = Map({\r\n  isConnected: true\r\n});\r\n\r\nexport const UserReducer: ActionReducer<Map<string, any>> = (userState: Map<string, any> = initialUser, action: Action) => {\r\n  switch (action.type) {\r\n    case USR_CONNECT:\r\n      return userState.setIn(['isConnected'], true);\r\n\r\n    case USR_DISCONNECT:\r\n      return userState.setIn(['isConnected'], false);\r\n\r\n    default:\r\n      return userState;\r\n  }\r\n};\r\n```\r\n\r\nMy component looks like this : \r\n\r\n```javascript\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { Store } from '@ngrx/store';\r\nimport { Observable } from 'rxjs/Observable';\r\nimport { USR_CONNECT, USR_DISCONNECT } from '../reducers/user.reducer';\r\n\r\ninterface IUser {\r\n  name?: string,\r\n  isConnected: boolean\r\n};\r\n\r\n@Component({\r\n  selector: 'app-login',\r\n  templateUrl: './login.component.html',\r\n  styleUrls: ['./login.component.scss']\r\n})\r\nexport class LoginComponent {\r\n  private user: Observable<IUser>;\r\n\r\n  constructor(public store: Store<IUser>) {\r\n    this.user = store.select('user');\r\n  }\r\n}\r\n```\r\nAnd within my app.module.ts I have in NgModule/imports : \r\n```javascript\r\n...\r\nStoreModule.provideStore({\r\n  user: UserReducer\r\n})\r\n...\r\n```\r\n\r\nThe problem here is (probably with immutableJs).\r\nIn my view : \r\n```HTML\r\n<div [style.color]=\"(user | async).isConnected ? 'green': 'red'\">is user connected ?</div> {{ (user | async) | json }}\r\n\r\n<div *ngIf=\"(user | async).isConnected\">Is connected !</div>\r\n<div *ngIf=\"!(user | async).isConnected\">Is NOT connected !</div>\r\n```\r\n\r\nIt's always red and NOT connected. BUT, The json display is : \r\n```{ \"isConnected\": true }```\r\n\r\nI think I might need to convert the immutable object to a Javascript object.\r\n\r\nAny idea on that ?\r\n\r\nAfter some research, I found this library : https://www.npmjs.com/package/ng2-storeservice\r\nAnd this part is interesting : https://www.npmjs.com/package/ng2-storeservice#usage-with-immutable-structures\r\n\r\n```StoreService.setTransformFunction(obj => obj.toJS());```\r\n\r\nIs there something similar with ngrx ?\r\n\r\nThanks for any help =)\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/ngrx/store/issues/comments/249841512","html_url":"https://github.com/ngrx/store/issues/233#issuecomment-249841512","issue_url":"https://api.github.com/repos/ngrx/store/issues/233","id":249841512,"user":{"login":"kylecordes","id":8799,"avatar_url":"https://avatars.githubusercontent.com/u/8799?v=3","gravatar_id":"","url":"https://api.github.com/users/kylecordes","html_url":"https://github.com/kylecordes","followers_url":"https://api.github.com/users/kylecordes/followers","following_url":"https://api.github.com/users/kylecordes/following{/other_user}","gists_url":"https://api.github.com/users/kylecordes/gists{/gist_id}","starred_url":"https://api.github.com/users/kylecordes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kylecordes/subscriptions","organizations_url":"https://api.github.com/users/kylecordes/orgs","repos_url":"https://api.github.com/users/kylecordes/repos","events_url":"https://api.github.com/users/kylecordes/events{/privacy}","received_events_url":"https://api.github.com/users/kylecordes/received_events","type":"User","site_admin":false},"created_at":"2016-09-27T11:43:45Z","updated_at":"2016-09-27T11:43:45Z","body":"In LoginComponent, the declaration ```user: Observable<IUser>;``` doesn't match the data coming out of the store, which will be an ```Observable<Map<string, any>```. This is an ongoing irritation of using a data structure library like ImmutableJS - it moves the actual data types up beyond where the Typescript type system can reach them. In you case I think you can easily get an ```Observable<IUser>``` by adding ```.map(x => x.toJS())``` to the end of your select(...) invocation - though Typescript has no way of knowing if this type is true.\r\n\r\n(I haven't used ng2-storeservice, and the question about it maybe goes in its repo or other communication channel?)"}}
{"actor":{"display_login":"kylecordes"}}