Question

在我的app.component.html中，我创建了一个自定义组件（联系表组件），在我将连接用户更新为其他人之后，应该获得一个新值（Account）。

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类中的订阅效果很好，可以触发任何出现的更新。

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

我试图查看发送给联系人表组件的内容，我看到他在第一次创建联系表组件时只得到一个值，并且未定义。这不可能因为我的reducer函数为我的应用程序的初始状态创建一个空的Account对象。

你有没有注意到我错过了什么？

Answer 1

检查并确保使用Object.assign创建对您所在州的更改。它不应该返回变异状态。当对象哈希发生变化时，Redux / ngrx和异步管道检测到更改（或者至少这是我的理解）。当我没有创建一个全新的对象但意外地改变现有状态并将其返回时，我遇到了这个问题。

引用redux网站 - ＆gt; http://redux.js.org/docs/basics/Reducers.html

我们不会改变国家。我们使用Object.assign（）创建一个副本。 Object.assign（state，{visibilityFilter：action.filter}）也是错误的：它会改变第一个参数。您必须提供一个空对象作为第一个参数。您还可以启用对象扩展运算符提议来代替{＆gt; ... state，... newState}。

我也遇到了RC2的异步问题，所以如果你没有使用RC3或以上，我建议升级。

不是说这是它，但它是我经验中最有可能的候选人。希望这可以帮助。

Answer 2

尝试使用json管道来查看该视图是否从该商店选择获取任何内容。

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

Answer 3

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

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

3 个答案: