Store 不会触发对异步管道的更改

Question

在我的 app.component.html 中，我创建了一个自定义组件（contact-table 组件），在我将商店中的连接用户更新为别人。

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]
      }
    });
  }
}

AppComponent class 中的订阅效果很好，会触发出现的任何更新。

问题是 app.component.html 中的异步管道没有将新帐户发送到 contact-table 组件。我认为他不会收到任何更新通知。

我试图查看发送到 contact-table 组件的内容，我看到他在第一次创建 contact-table 组件时只得到一个值，而且它是未定义的。那是不可能的，因为我的 reducer 函数为我的应用程序的初始状态创建了一个空的 Account 对象。

你注意到我遗漏了什么吗？

Answer 1

检查并确保您正在使用 Object.assign 对您的状态进行更改。它不应该 return 变异状态。 Redux/ngrx 和异步管道在对象哈希更改时检测更改（或者至少这是我的理解）。我运行遇到了这个问题，当时我不是在创建一个全新的对象，而是不小心改变了现有状态并 return 对它进行了修改。

引用redux站点->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.

我还遇到了 RC2 的异步问题，所以如果您没有使用 RC3 或更高版本，我建议您升级。

不是说就是这样，但根据我的经验，这是最有可能的候选人。希望这可以帮助。

Answer 2

尝试使用 json 管道来查看视图是否从该商店获取任何东西 select。

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

Answer 3

您可以包含 ngrx-store-freeze - 可变状态的问题很容易解决。我经常调试 Actions 调度的另一种方法是引入一个 Effect 用于记录目的。这也有助于识别问题。

Store 不会触发对异步管道的更改

Store doesn't fire changes to the async pipe

javascript

rxjs

ngrx

angular