使用 RxJS 实现一个简易的仿 Elm 架构应用

什么是 Elm 架构

Elm 架构是一种使用 Elm 语言编写 Web 前端应用的简单架构，在代码模块化、代码重用以及测试方面都有较好的优势。使用 Elm 架构，可以非常轻松的构建复杂的 Web 应用，无论是面对重构还是添加新功能，它都能使项目保持良好的健康状态。

Elm 架构的应用通常由三部分组成——模型、更新、视图。这三者之间使用 Message 来相互通信。

模型

模型通常是一个简单的 POJO 对象，包含了需要展示的数据或者是界面显示逻辑的状态信息，在 Elm 语言中，通常是自定义的“记录类型”，模型对象及其字段都是不可变的（immutable）。使用 TypeScript 的话，可以简单的用接口来描述模型：

export interface IHabbitPresetsState {     presets: IHabbitPreset[];     isLoading: boolean;     isOperating: boolean;     isOperationSuccess: boolean;     isEditing: boolean; }

这时候，我们就需要在心中谨记，永远不要去修改模型的字段！

Message

Message 用来定义应用程序在运行过程中可能会触发的事件，例如，在一个秒表应用中，我们会定义“开始计时”、“暂停计时”、“重置”这三种事件。在 Elm 中，可以使用 Union Type 来定义 Message，如果使用 TypeScript 的话，可以定义多个消息类，然后再创建一个联合类型定义：

export type HabbitPresetsMsg =     Get | Receive     | Add | AddResp     | Delete | DeleteResp     | Update | UpdateResp     | BeginEdit | StopEdit;  export class Get { }  export class Receive {     constructor(public payload: IHabbitPreset[]) { } }  export class Add {     constructor(public payload: IHabbitPreset) { } }  export class AddResp {     constructor(public payload: IHabbitPreset) {     } }