背景
在现代的大型应用程序中，通过事件驱动架构实现的事件溯源(Event Sourcing)模式变得越来越流行。它强制开发人员将所有状态变更视为事件，并记录下这些事件，而不是直接将更改写入数据库。
这种模式的好处是可以轻松地回滚到以前的状态，并减少了数据冲突的概率。npm 包 @batteryincluded/ts-eventsourcing 提供了一个易于使用的事件溯源库，使得在前端端使用事件溯源模式变得更加简单和方便。
安装
在通过 npm 安装 @batteryincluded/ts-eventsourcing 之前，请确保已经安装了 Node.js 和 npm。
接下来，在您的项目中运行以下命令安装 @batteryincluded/ts-eventsourcing：
npm install @batteryincluded/ts-eventsourcing --save
使用
创建模型和命令
在使用 @batteryincluded/ts-eventsourcing 开发应用程序之前，您需要分别定义模型和命令。模型使用 TypeScript class 定义，而命令定义为一个包含必须数据的普通 JavaScript 对象。
-- -------------------- ---- -------
-- -----
------ ----- ------- -
------ ----- - --
------ -------------- ---- -
-------------
-
------ -------------- ---- -
-------------
-
-
-- -------
------ --------- -------------- -
----- ----------- - ------------
-------- -------
-在上述代码中，Counter 是我们要创建的模型，它具有计数器状态和两个事件处理程序：onIncrement 和 onDecrement。CounterCommand 是命令，它有两种类型：“INCREMENT”和“DECREMENT”，并带有一个负载数据。
创建事件处理器
接下来，我们需要为我们的模型创建事件处理器。事件处理程序是具有各自的 handle（处理）和 apply（应用）方法的 TypeScript class。它的作用是将事件记录下来，以便以后进行事件回放。
-- -------------------- ---- -------
------ - ------------ - ---- ------------------------------------
------ - ------- - ---- ------------
------ - -------------- - ---- -------------------
------ ----- ------------------- ------- --------------------- --------------- -
------ --------------- -------- -------- ---------------- ---- -
------ -------------- -
---- ------------
----------------------
------
---- ------------
----------------------
------
-
-
------ -------------- -------- ------- ------------------ ---- -
--- ------ ----- -- ------- -
-------------------- -------
-
-
-在上述代码中，CounterEventHandler 继承了 EventHandler，并实现了 handle 和 apply 方法。handle 方法负责处理每个事件，而 apply 方法负责将事件应用到当前的 Counter 对象。在 apply 方法中调用 handle 方法，对事件进行迭代并应用状态更改。
创建事件存储
创建事件存储和使用它来保存和检索事件是实现事件溯源的重要部分。@batteryincluded/ts-eventsourcing 的事件存储使用 LocalStorage 进行事件持久化，该项功能仅仅只需要包括事件处理程序和应用程序的部分。
import { EventStore } from "@batteryincluded/ts-eventsourcing";
import { Counter } from "./Counter";
export class CounterEventStore extends EventStore<Counter> {
constructor() {
super("counter", new Counter());
}
}在上述代码中，CounterEventStore 继承了 EventStore，并通过指定 LocalStorage 事件流的键名和初始默认状态来创建一个新的事件存储。
创建事件发布器
事件发布器负责将命令派发给事件处理程序，并将事件存储到事件存储中。 @batteryincluded/ts-eventsourcing 的事件发布器使用 EventEmitter2 进行事件发布和订阅，是使用此库编写的任何事件处理程序的标准选择。
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------- ------ - ----------------- - ---- ------------------------------------ ------ - ------------------- - ---- ------------------------ ------ - ----------------- - ---- ---------------------- ------ - -------------- - ---- ------------------- ----- ------------ - --- --------------- --------- ---- --- ----- ---------- - --- -------------------- ----- ------------ - --- ---------------------- ----- ---------- - --- -------------------------- ----------------------------- ------------- ------------ ------ ------- -----------
在上述代码中，我们实例化了 EventEmitter2 并传递了一个 wildcard 标志，以便我们可以对事件进行订阅。我们然后使用我们先前创建的 CounterEventHandler 和 CounterEventStore 实例化 CommandDispatcher。
派发命令
现在，我们已经创建了 CounterEventHandler、CounterEventStore 和 CommandDispatcher，我们可以开始使用它们来记录和应用事件。
import dispatcher from "./dispatcher";
import { CounterCommand } from "./CounterCommand";
const command1: CounterCommand = { type: "INCREMENT", payload: 1 };
dispatcher.dispatch(command1);
const command2: CounterCommand = { type: "DECREMENT", payload: 2 };
dispatcher.dispatch(command2);在上述代码中，我们导入了我们以前创建的 dispatcher，并将命令派发给 CommandDispatcher。
事件回放
事件存储在事件溯源架构中的最重要功能之一是它允许我们回放以前的事件。更新事件存储后，我们可以在任何时候使用事件回放来从中恢复模型的状态。
import dispatcher from "./dispatcher";
import { Counter } from "./Counter";
const eventStore = dispatcher.getEventStore("counter");
const counter = new Counter();
eventStore.replay(counter);
console.log(counter.count); // 1在上述代码中，我们获取事件存储，实例化新的 Counter，并使用 replay 方法将存储的事件应用到 Counter 对象。此时，Counter 对象具有之前的状态：1。
总结
使用 @batteryincluded/ts-eventsourcing，创建具有事件溯源的前端应用程序变得轻松，这样我们就可以轻松地记录所有状态更改，并可以轻松恢复应用程序的状态。希望这篇文章能够帮助你学习和使用 @batteryincluded/ts-eventsourcing 库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbdcf