存储不会触发对异步管道的更改答案

【问题标题】：Store doesn't fire changes to the async pipe存储不会触发对异步管道的更改
【发布时间】：2016-07-26 15:41:53
【问题描述】：

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

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 对象。

你注意到我错过了什么吗？

【问题讨论】：

您的联系表组件是什么样的？

标签： javascript angular rxjs ngrx

【解决方案1】：

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

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

我们不会改变状态。我们使用 Object.assign() 创建一个副本。 Object.assign(state, { visibilityFilter: action.filter }) 也是错误的：它会改变第一个参数。您必须提供一个空对象作为第一个参数。您还可以启用对象扩展运算符提案以改为 { >...state, ...newState }。

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

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

【讨论】：

另外我强烈推荐在开发过程中使用ngrx-store-logger。它会在一个动作之前和之后将状态写到控制台，它还会打印出中间的动作。 github.com/btroncone/ngrx-store-logger
好的，首先感谢您的回答！对于对象中的每次更改，store 都会将新状态返回到 AppComponent 类中的订阅中，如前所述。我不明白为什么将更改发送到那里但也没有发送到异步管道。总而言之，我会采纳你提到的技巧 + 将开始使用 ngrx-store-logger。欢迎任何其他解决方案。

【解决方案2】：

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

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

【讨论】：

我看到你的另一篇帖子询问选择。我在 stackoverflow 中还没有足够的代表在那里发表评论。如果您还没有看到这些示例，我只是想建议您查看这些示例，以便在确定设置时提供帮助。 github.com/ngrx/example-app 和 github.com/btroncone/ngrx-examples 。两者都给了我当前项目的想法。

【解决方案3】：

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

【讨论】：