brandonroberts/ngrx-store-freeze

No errors in combination with ngModel

Closed this issue · 2 comments

d3lm commented

I am using the ngrx-store-freeze middleware in my application and noticed that no errors are thrown when the state is directly updated by a two-way data binding using ngModel. I already went down the road of debugging but it seems very weird and I cannot figured out why the state can be updated like this.

In my component I use the following selector:

export const getSelectedContact = createSelector(getContacts, getSelectedContactId, (contacts, id) => {
  let contact = contacts.find(contact => contact.id == id);

  return Object.assign({}, contact);
});

...

this.contact$ = store.select(getSelectedContact);

As you can see, I must copy the object because otherwise the view will directly update my application state.

In my template I have the following:

<md-input-container fxFlex>
  <input mdInput placeholder="Name" name="name" [(ngModel)]="contact.name">
</md-input-container>

I use ngIfAs to create a local template variable in combination with the async pipe like so *ngIf="contact$ | async as contact", in case you are wondering why I am using contact$ and contact.

d3lm commented

Similar discussion here #12

Closing as a duplicate of #12