1

我的应用程序使用ngrx/rxjs。我依靠 ngrx 效果从商店中注销和清除状态。

不幸的是，因为我的一个组件通过选择器订阅了商店（见下文：）getLatestMessagesByCounterParty，并且因为在该组件被销毁之前清除了状态，所以我收到以下错误：

错误类型错误：无法在 getCurrentUserAccountId 处读取 null 的属性“id”

...表示 i​​s ，这currentUserAccount是null非常合乎逻辑的，因为我刚刚从商店中清除了状态。

这是signout$效果：

  @Effect()
  signout$: Observable<Action> = this.actions$
    .ofType(authenticated.ActionTypes.SIGNOUT)
    .switchMap(() =>
      this.sessionSignoutService.signout()
        .do(() => {
          localStorage.removeItem('authenticated');
          localStorage.removeItem('sessionToken');
        })
        .concatMap(() => [
          new ClearMessagesAction(null),
          new ClearUserAccountAction(null),//Error thrown here...
          go(['/signin'])//Never reached...
        ]));

这是订阅登录状态的组件：

  ngOnInit() {
    this.store.select(fromRoot.getLatestMessagesByCounterParty)
      .subscribe(latestMessages => this.latestMessages = this.messageService.sortMessagesByDate(latestMessages, this.numberOfConversations));
  }

以及相关的选择器：

...
const getCurrentUserAccountId = (state: State) => state.userAccount.currentUserAccount.id;
const getMessagesState = (state: State) => state.message.messages;

...
export const getLatestMessagesByCounterParty = createSelector(getCurrentUserAccountId, getMessagesState, fromMessage.latestMessagesByCounterParty);

我正在寻找关于何时、何时以及如何从商店中清除状态的最佳实践。理想情况下，我希望在订阅组件已被销毁的最后时间这样做。

有人可以建议吗？

编辑：让我进一步完善我的评论。我上面的代码应该如下所示。

   .concatMap(() => [
      new ClearMessagesAction(null),
      new ClearUserAccountAction(null),//Error thrown right after this action because selector cannot find id variable on state
      go(['/signin'])//Never reached...
    ]));
4

1 回答 1

0

正如@cgatian 所说，您可能会使用过滤器。但这是使用该代码在幕后会发生的事情：

.concatMap(() => [
  new ClearMessagesAction(null),
  new ClearUserAccountAction(null),//Error thrown here...
  go(['/signin'])//Never reached...
]));

您首先要发送一个 action ClearMessagesAction(null)。
然后该操作将由您的减速器处理。
___将产生一个新状态
___您的选择器将在
___ 之后立即触发一个错误，因为您最终会得到一个不一致的存储（因为您希望ClearUserAccountAction(null)在选择器启动之前同时调度另一个操作）

为了避免状态不一致，你应该做的是：
- 创建一个你在两个减速器中处理的动作。这样，您的 reducer 将被修改，然后选择器才会启动
- 使用允许您将多个操作作为一个分派的库（如redux-batched-actions）。这样你就可以写这样的东西：

batchActions([
  new ClearMessagesAction(null), --> selectors not triggered yet
  new ClearUserAccountAction(null) --> selectors not triggered yet
]); --> selectors triggered now
于 2017-04-19T06:34:07.660 回答