使用 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) { } }