代码之家 › 专栏 › 技术社区 › tone

ngrx效应导致错误且未正确触发

ngrx-effects ngrx angular

0

tone · 技术社区 · 8 年前

我目前正在angular 5.2.1中使用ngrx 4.1.1构建ngrx面包屑组件。这是一项正在进行的工作,因此仍有一些部分需要修复。

我当前在更改效果中遇到错误。错误是:

效果“breadcrumbefects.breadcrumbs$”引发错误来源:面包屑效果

错误:TypeError:您在需要流的位置提供了“undefined”。您可以提供可观察的、承诺的、数组的或可观察的。

只有在通过“withLatestFrom”语句添加到现有状态后,我才得到错误。在此之前,我没有withLatestFrom语句,我有一个switchMap语句而不是map语句,它工作得很好。我做错了什么?

我的效力声明如下。

/* Effects handle the actual execution of the action */
import { Injectable } from "@angular/core";
import { BreadcrumbService } from "./breadcrumb.service";
import { Observable } from "rxjs/Observable";
import * as moment from "moment";
import { Action, Store } from "@ngrx/store";
import { Effect, Actions } from "@ngrx/effects";
import { BreadcrumbActionTypes, ChangeBreadcrumbsAction, ChangeBreadcrumbsCompleteAction } from "./breadcrumb.actions";
import * as fromBreadcrumbReducer from "./breadcrumb.reducers";

@Injectable()
export class BreadcrumbEffects {

    crumbs$: Observable<any>;

    constructor(private readonly actions$: Actions,
        private readonly store$: Store<fromBreadcrumbReducer.BreadcrumbState>,
        private readonly breadcrumbService: BreadcrumbService) {

        this.crumbs$ = this.store$.select(fromBreadcrumbReducer.Selectors.getBreadcrumbs);
    }

    @Effect()
    breadcrumbs$: Observable<ChangeBreadcrumbsCompleteAction> =
    this.actions$
        .ofType(BreadcrumbActionTypes.ChangeBreadcrumbs)
        .withLatestFrom(this.crumbs$)
        .map((result: any) => {
            let action: ChangeBreadcrumbsAction, crumbs: any[];
            [action, crumbs] = result;
            /* make a copy of the existing crumbs. */
            /* this code is still being worked on, hence the hardcoded index */
            const newCrumbs = crumbs.slice(0);
            if (crumbs.length > 0) {
                newCrumbs[1] = { ...newCrumbs[1], displayName: action.name }
            }
            return new ChangeBreadcrumbsCompleteAction(newCrumbs);
        });
}

1 回复 | 直到 8 年前

1

2

cartant 8 年前

问题是 this.crumbs$ 已传递给 withLatestFrom(this.crumbs$) ,但只有在构造函数中赋值后才能定义它。

您可以使用 defer :

import { defer } from "rxjs/observable/defer";
...
.withLatestFrom(defer(() => this.crumbs$))

或者使用函数声明效果:

@Effect()
breadcrumbs$(): Observable<ChangeBreadcrumbsCompleteAction> {
  return this.actions$
    .ofType(BreadcrumbActionTypes.ChangeBreadcrumbs)
    .withLatestFrom(this.crumbs$)
    .map((result: any) => {
      let action: ChangeBreadcrumbsAction, crumbs: any[];
      [action, crumbs] = result;
      /* make a copy of the existing crumbs. */
      /* this code is still being worked on, hence the hardcoded index */
      const newCrumbs = crumbs.slice(0);
      if (crumbs.length > 0) {
        newCrumbs[1] = { ...newCrumbs[1], displayName: action.name }
      }
      return new ChangeBreadcrumbsCompleteAction(newCrumbs);
});