当使用@ngrx/effects时,需要避免对相同的actions进行取消操作。否则可能会导致一些预料之外的问题,如状态更新错误等。为了解决这个问题,可以使用不同的action类型来代表取消操作。例如,我们可以使用以下代码来实现:
// 定义一个处理effect的action export const fetchTodos = createAction('[Todos List] Fetch Todos');
// 定义代表取消处理effect的action export const cancelFetchTodos = createAction('[Todos List] Cancel Fetch Todos');
// 将处理effect的action和代表取消操作的action结合,传递给@Effect()装饰器 @Effect() loadTodos$ = this.actions$.pipe( ofType(fetchTodos), switchMap(() => this.todosService.getTodos()), map(todos => new LoadTodosSuccess({ todos })), takeUntil(this.actions$.pipe(ofType(cancelFetchTodos))) // 将代表取消操作的action传递给takeUntil操作符 );
// 在组件中触发处理effect的action this.store.dispatch(fetchTodos());
// 在需要取消操作时,触发代表取消操作的action this.store.dispatch(cancelFetchTodos());
通过这种方法,我们可以避免对相同的actions进行取消操作,从而确保程序运行的正确性和稳定性。