Store doesn't fire changes to the async pipe

Question

In my app.component.html I create a custom component (contact-table component) that should get a new value (Account) to present after I update the in the store the connected user to be someone else.

app.component.html:

<contact-table [contacts]="connectedAccount$ |async"></contact-table>

app.component.ts:

export class AppComponent implements OnInit
{
  private connectedAccount$: Observable<Account>;
  constructor(private store:Store<any>) {
    this.connectedAccount$ = this.store
      .select(state=> state.connectedAccountReducer.connectedAccount);

    this.connectedAccount$
      .subscribe(account1=> {
       //the app prints any new account that comes up. It's working here.
       console.log(account1);
      });
  }
  public ngOnInit() {
    this.store.dispatch({
      type: updateConnectedAccount,
      payload: {
        connectedAccount: ACCOUNTS[0]
      }
    });
  }
}

The subscribtion in AppComponent class works great and fires any update that comes up.

The problem is that the async pipe in app.component.html does not send the new account to the contact-table component. I think he doesn't get notified for any updates.

I tried to see what is being sent to the contact-table component, and I saw he only get one value in the first creation of the contact-table component and its undefined. Thats not possibole becouse my reducer function creates an empty Account object for the initial state of my app.

Is there anything you notice that I missed?

Answer 1

Check and make sure you are using Object.assign to create the changes to your state. It shouldn't return a mutated state. Redux/ngrx and the async pipe detect changes when the object hash changes (or at least this is my understanding). I've run into this problem when I wasn't creating a brand new object but accidentally mutating the existing state and returning it.

To quote the redux site -> http://redux.js.org/docs/basics/Reducers.html

We don't mutate the state. We create a copy with Object.assign(). Object.assign(state, { visibilityFilter: action.filter }) is also wrong: it will mutate the first argument. You must supply an empty object as the first parameter. You can also enable the object spread operator proposal to write { >...state, ...newState } instead.

I also had a async issue with RC2 so if you aren't using RC3 or above I'd recommend upgrading.

Not saying this is it but it is the most likely candidate from my experience. Hope this helps.

Answer 2

尝试使用json管道只是为了查看视图是否从该商店选择中获取任何东西。

<span>{{connectedAccount$ |async | json}}</span>

Answer 3

You can include ngrx-store-freeze - the problem with mutable state is easy to address. Another way of how I often debug the dispatching of Actions is to introduce an Effect for logging purpose. This helps to identify problems as well.