NgRX 中的 RxJS 调度器-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是一个强大的响应式编程库，它提供了许多操作符，使编程变得更易于管理复杂性，现在它被广泛应用于 Angular 中。在本文中，将介绍 NgRX 中的 RxJS 调度器，以及如何利用调度器来实现更好的性能和可维护性。

什么是调度器？

调度器是 RxJS 的一个组件，它可以控制何时和在哪个上下文中执行操作。如果您没有使用调度器，则默认情况下，所有操作都将在下一帧中异步执行，这可能对性能产生一定的影响。

调度器可以在许多情况下提供性能优势，例如：

当需要确保在页面刷新之前完成某些操作时。
当需要优化性能，以便在处理大量事件时更快地更新UI。

NgRx 中的调度器

NgRX 是基于 Flux 架构的状态管理库，与 Angular 结合使用，通常用于大型应用程序中。它提供了一个 Redux store，用于在应用程序中管理状态。

NgRX 使用 RxJS 作为其响应式框架，因此它集成了 RxJS 的调度器，并可以使用它来提高性能。

调度器的类型

RxJS 提供了几个调度器，每个调度器都具有自己的特定用途和行为。

async

async 调度器是默认调度器，它在异步执行的下一帧中执行操作。这是 RxJS 的标准行为。

import { asyncScheduler } from 'rxjs';

const subscription = asyncScheduler.schedule(() => {
  console.log('Hello World!');
});

// 取消任务
subscription.unsubscribe();

animationFrame

animationFrame 调度器在下一帧渲染之前执行操作。它是在 requestAnimationFrame 中运行的。

import { animationFrameScheduler } from 'rxjs';

const subscription = animationFrameScheduler.schedule(() => {
  console.log('Hello World!');
});

// 取消任务
subscription.unsubscribe();

queue

queue 调度器按顺序执行操作，类似于事件循环中的任务队列。

import { queueScheduler } from 'rxjs';

const subscription = queueScheduler.schedule(() => {
  console.log('Hello World!');
});

// 取消任务
subscription.unsubscribe();

asap

asap 调度器尽快执行操作（ASAP）。它尝试在当前运行帧完成后立即执行操作。

import { asapScheduler } from 'rxjs';

const subscription = asapScheduler.schedule(() => {
  console.log('Hello World!');
});

// 取消任务
subscription.unsubscribe();

@ngrx/effects 中的调度器

@ngrx/effects 是一个用于副作用管理的库，它允许您处理副作用（如异步请求和 I/O 操作）并将结果发送回 store。

@ngrx/effects 提供了一些可用于在调度器中运行任务的辅助函数。

runEffects

runEffects 函数可以同时运行多个 Effect，它使用传递的调度器来运行任务。

-- -------------------- ---- -------
------ - -- - ---- -------
------ - ------- --- - ---- -----------------
------ - -------- ------------ - ---- ----------------

-------------
------ ----- --------- -
  --------- - --------------- --
    -------------------
      --------------- -- ----------- --- -------------- ---- -------
      ------ -- --------------------- -----------
      ------------ -- --------------------------
      ---------- -- ----------------- -------- -------
    --
    -
      --------- ------
      ------------------ -----
      ---------- ------------------------
    --
  --

  ------------------- --------- -------- ------- ---------- ---------- --
-

qrun

qrun 函数可以将 Effect 添加到一个队列中，并使用指定的调度器相继执行它们。

-- -------------------- ---- -------
------ - ---- - ---- ----------------

-- ---- ------
----- ------- - ---- ----- -------------- ---- ---- -- ---
----- ------- - ---- ----- -------------- ---- ---- -- ---

-- ---------------
-------------- --------- ---------------------------------- --
  --------------------
--

总结

在本文中，我们学习了在 NgRX 中使用 RxJS 调度器的方法。调度器提供了更好的性能和可维护性，以便管理复杂性。它们允许您控制何时和在给定上下文中执行操作。我们还介绍了 @ngrx/effects 中的调度器操作和有关它们的示例代码。我希望这篇文章对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648c0f4148841e9894a5bdf7