是一种在NgRx应用程序中处理副作用的常见模式。在这种模式下,我们可以使用RxJS的管道操作符来处理NgRx效果中的数据,并通过调用另一个API来执行一些副作用操作。
具体步骤如下:
LoadData
的动作。import { createAction, props } from '@ngrx/store';
export const loadData = createAction('[Data] Load Data');
LoadData
动作并触发副作用操作。在这个效果中,我们可以使用switchMap
操作符来处理数据,并通过管道调用另一个API。import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';
@Injectable()
export class DataEffects {
loadData$ = createEffect(() =>
this.actions$.pipe(
ofType('[Data] Load Data'),
switchMap(() =>
this.apiService.getData().pipe(
map((data) => ({ type: '[Data] Load Data Success', payload: data })),
catchError((error) => of({ type: '[Data] Load Data Failure', payload: error }))
)
)
)
);
constructor(private actions$: Actions, private apiService: ApiService) {}
}
apiService
是一个用于调用另一个API的服务。在switchMap
操作符中,我们可以调用apiService.getData()
来获取数据,并使用map
操作符将数据转换为一个新的动作[Data] Load Data Success
,然后将其发送到存储中。如果发生错误,我们可以使用catchError
操作符将错误转换为一个新的动作[Data] Load Data Failure
。LoadData
动作来触发副作用操作。import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { loadData } from './data.actions';
@Component({
selector: 'app-data',
template: `
<button (click)="onLoadData()">Load Data</button>
`,
})
export class DataComponent {
constructor(private store: Store) {}
onLoadData() {
this.store.dispatch(loadData());
}
}
通过以上步骤,我们可以在NgRx应用程序中使用管道操作符来处理NgRx效果中的数据,并通过调用另一个API来执行副作用操作。这种模式可以帮助我们更好地管理副作用,并保持应用程序的可维护性和可测试性。
腾讯云相关产品和产品介绍链接地址:
云+社区技术沙龙[第7期]
云+社区技术沙龙[第14期]
云+社区技术沙龙[第21期]
企业创新在线学堂
企业创新在线学堂
云+社区技术沙龙[第27期]
云+社区技术沙龙[第22期]
云+社区技术沙龙[第25期]
T-Day
领取专属 10元无门槛券
手把手带您无忧上云