如何使用@NgRx/Effects只向服务器发送一次请求 [英] How to send request to the server only once by using @NgRx/effects

问题描述

目前，我希望在我的项目上使用NgRx，并且我有一个与从服务器获取数据相关的问题。

例如，我有这样的代码。

组件中

// import ....

export class ToDoComponent implements OnInit {
  todo$: Observable<ToDoState>;
  ToDoSubscription: Subscription;
  ToDoList: ToDo[] = [];

  constructor(private store: Store<{ todos: ToDoState }>) {
    this.todo$ = store.pipe(select('todos'));
  }

  ngOnInit() {
    this.ToDoSubscription = this.todo$
      .pipe(
        map(x => {
          this.ToDoList = x.ToDos;
          this.todoError = x.ToDoError;
        })
      )
      .subscribe();

    this.store.dispatch(ToDoActions.BeginGetToDoAction());
  }
}

和这个

In Effect

// import ....

@Injectable()
export class ToDoEffects {
  constructor(private http: HttpClient, private action$: Actions) {}

  private ApiURL: string = 'https://localhost:44308/api/ToDo';

  GetToDos$: Observable<Action> = createEffect(() =>
    this.action$.pipe(
      ofType(ToDoActions.BeginGetToDoAction),
      mergeMap(action =>
        this.http.get(this.ApiURL).pipe(
          map((data: ToDo[]) => {
            return ToDoActions.SuccessGetToDoAction({ payload: data });
          }),
          catchError((error: Error) => {
            return of(ToDoActions.ErrorToDoAction(error));
          })
        )
      )
    )
  );
}

这是否意味着每当用户导航到ToDoComponent组件时，我都会向服务器发送请求？

如果是，我如何将我的效果配置为只发送一次请求？

或者这种情况的最佳方法是什么？

如有任何帮助，将不胜感激。

谢谢！

推荐答案

是的，每次您导航到组件时，它都会获取待办事项。

这是因为派单行，

this.store.dispatch(ToDoActions.BeginGetToDoAction());

您可以检查它是否已存在于商店中，如Start using ngrx/effects for this

所示

@Effect()
getOrder = this.actions.pipe(
  ofType<GetOrder>(ActionTypes.GetOrder),
  withLatestFrom(action =>
    of(action).pipe(
      this.store.pipe(select(getOrders))
    )
  ),
  filter(([{payload}, orders]) => !!orders[payload.orderId])
  mergeMap([{payload}] => {
    ...
  })
)

或者您可以只在效果中添加take(1)：

  GetToDos$: Observable<Action> = createEffect(() =>
    this.action$.pipe(
      ofType(ToDoActions.BeginGetToDoAction),
      mergeMap(action =>
        this.http.get(this.ApiURL).pipe(
          map((data: ToDo[]) => {
            return ToDoActions.SuccessGetToDoAction({ payload: data });
          }),
          catchError((error: Error) => {
            return of(ToDoActions.ErrorToDoAction(error));
          })
        )
      ),
      take(1)
    )
  );

下面是Stackblitz示例。https://stackblitz.com/edit/angular-d6jctm

这篇关于如何使用@NgRx/Effects只向服务器发送一次请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！