Цепные действия вместе в эффекте для NgRx (Angular) - PullRequest
Новая
       15

Цепные действия вместе в эффекте для NgRx (Angular)

0 голосов
/ 12 ноября 2019

У меня есть эффект, который сработал, но мне нужно связать его со службой, которая вызывается в другом действии, после обновления состояния в первом действии через редуктор.

Эффект ниже: 

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),
    switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f, 'load');
    }),
    map((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return
            new AppActions.UploadComplete(res),
            new AppActions.PerformCalc()
    })
);

Я добавил второе действие, но теперь получаю наблюдаемую ошибку.

Ответы [ 2 ]

1 голос
/ 12 ноября 2019

Итак, если вы хотите отправить более одного действия из эффекта, вы можете вернуть массив действий и заменить map на mergeMap: 

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),
    switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f, 'load');
    }),
    mergeMap((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return [
            new AppActions.UploadComplete(res),
            new AppActions.PerformCalc()
        ];
    })
);

Однако, если вы хотитеPerformCalc действие, которое будет отправлено после выполнения действия UploadComplete, вы должны отправить PerformCalc в качестве побочного эффекта UploadComplete: 

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),
    switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f, 'load');
    }),
    map((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return new AppActions.UploadComplete(res);
    })
);

@Effect()
uploadComplete$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadComplete),
    map(() => new AppActions.PerformCalc())
);
0 голосов
/ 12 ноября 2019

Вы можете сделать это, используя switchMap & оператора 

@Effect()
dispatchMultiAction$: Observable<Action> = this.actions$.pipe(
    ofType<SomeAction.Dispatch>(someActions.Dispatch),
    switchMap(_ =>
        of(
            new someActions.InitData(),
            new someActions.GetData(),
            new someActions.LoadData()
        )
    )
);
...