Question

在此示例中，我具有此ngrx效果来调用电影服务，但是取决于值选择器，如果此值符合验证中的预期，则该效果会发送新的操作，因此我避免调用服务，因为条件。现在，由于以下错误，我无法在 if 块中使用其他操作（这将更具描述性）：

类型'Observable'不可分配给类型   '可观察的| （（... args：any []）=>可观察）'。

类型'Observable'不可分配给类型   ts（2322）。

处理这种情况的更好方法是什么？

loadMovies$ = createEffect(() => this.actions$.pipe(
        ofType('[Movies Page] Load Movies'),
        concatMap(action => of(action).pipe(withLatestFrom(this.store.select(getBlockBuster)))),
        mergeMap(([{payload}, foundBlockBuster]) => {
            if (!foundBlockBuster) {
                // in order to avoid errors we need to use this({ type: '[Movies API] Movies Loaded Success', payload: movies }))
                return of({ type: '[Movies] The block busters are rent' })
            }
            return this.moviesService.getAll()
                .pipe(
                    map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
                    catchError(() => of({ type: '[Movies API] Movies Loaded Error' }))
                )
            })
        )
    );

Answer 1

之所以发生此错误，是因为您应该返回Observable<action>，而不是您的代码返回两种类型的对象文字（假设其类型为Action），其中一种仅具有type属性，而另一个有type和payload。要解决此错误，请使用Action数组，然后将对象文字推送到该数组中，然后返回该数组，如下所示：

loadMovies$ = createEffect(() => this.actions$.pipe(
        ofType('[Movies Page] Load Movies'),
        concatMap(action => of(action).pipe(withLatestFrom(this.store.select(getBlockBuster)))),
        mergeMap(([{payload}, foundBlockBuster]) => {

            const actions = new Array<Action>();

            if (!foundBlockBuster) {
                actions.push({ type: '[Movies] The block busters are rent' });
                return actions;                
            }
            return this.moviesService.getAll()
                .pipe(
                    mergeMap(movies => {
                      actions.push({ type: '[Movies API] Movies Loaded Success', payload: movies });
                      return actions;
                    }),
                    catchError(() => {
                      actions.push({ type: '[Movies API] Movies Loaded Error' });
                      return actions;
                    })
                )
            })
        )
    );

或者，您可以像这样<Action>输入对象文字：

<Action>{ type: '[Movies] The block busters are rent' }

但是我更喜欢使用数组，因为如果我的应用程序逻辑需要的话，数组可以调度多个动作。

希望有帮助。

根据效果验证，取消ngrx效果服务调用的更好方法是什么？

1 个答案: