跳转到主文档

实现 Model

创建一个完整的 Model 首先需要定义状态(state),包括状态中数据的名称和初始值。

我们使用 Model 来管理联系人列表的数据,因此定义如下数据状态:

const state = {
items: [],
};

使用 TS 语法,可以定义更完整的类型信息,比如 items 里每个对象都应该有 nameemail 字段;

为了实现归档功能,还需要创建 archived 字段保存这个联系人是否已被归档的状态;

我们还需要一个字段用来访问所有已归档的联系人,可以定义 computed 类型的字段,对已有的数据做转换:

const computed = {
archived: ({ items }) => {
return items.filter(item => item.archived);
},
};

当前版本还未支持 computed,本章节后续部分会先使用其他方式实现 archived 列表,这里只做介绍。

computed 类型字段的定义方式是函数,但使用时可以像普通字段一样通过 state 访问。

Modern.js 支持的 Model 模块跟 React 组件一样,是基于 FP(Functional Programming)而不是 OOP(Object-Oriented Programming)的,对状态的管理是基于不可变数据的,不会修改状态中的数据,只会从一个状态转移到另一个状态,这样的好处很多,比如保障程序的可靠性、方便调试、方便记录和还原状态等。

由于 JS 没有原生支持不可变数据,为了提高编写这种代码的效率,Modern.js 集成了 Immer,能够像操作 JS 中常规的可变数据一样,去写这种状态转移的逻辑。

实现 Archive 按钮时,我们需要一个 archive 函数,负责修改指定联系人的 archived 字段,我们把这种函数都叫作 action

const actions = {
archive(draft, payload) {
const target = draft.items.find(item => item.email === payload);
if (target) {
target.archived = true;
}
},
};

action 函数是一种纯函数,确定的输入得到确定的输出(转移后的状态),不应该有任何副作用。

函数的第一个参数是 Immer 提供的 Draft State,第二个参数是 action 被调用时传入的参数(后面会介绍怎么调用)。

Model 里也可以定义 Side Effect,比如我们需要从 BFF 加载这个联系人列表的数据,这段业务逻辑可以写成:

const effects = {
async load() {
const { data } = await contacts();
return data;
},
};

一个 Side Effect 有多种实现方式,上面使用的是 Async 函数方式,这种方式是最简单直观的。Modern.js 会根据它返回的 Promise 对象的状态变化,自动触发不同的 action。

因此一个 effect 总共有三个 action,命名里会用 Side Effect 的名称作为命名空间,在这个例子里,分别是:

  • load.pending:等待中
  • load.fulfilled:成功,得到结果
  • load.rejected:失败,得到错误信息

Modern.js 虽然会自动定义和触发这些 action,但默认不会为这些 action 实现具体的业务逻辑(action 直接返回原本的状态,不做任何转换)。

我们尝试自己实现它们:

import _ from 'lodash';

const state = {
items: [],
pending: false,
error: null,
};

const computed = {
archived: ({ items }) => {
return items.filter(item => item.archived);
},
};

const actions = {
archive(draft, payload) {
const target = draft.items.find(item => item.email === payload);
if (target) {
target.archived = true;
}
},
load: {
pending(draft) {
draft.pending = true;
},
fulfilled(draft, payload) {
draft.pending = false;
_.merge(draft.items, payload);
},
rejected(draft, payload) {
draft.pending = false;
draft.error = payload;
},
},
};

上述实现里,成功时,payload 是 promise 的结果;失败时,payload 是错误信息。

从上面这个例子里可以看到,可以用嵌套的写法,实现 load.pending 这样名称中包含命名空间的 action。

为了做到高内聚低耦合,一个 Model 的 state、action、side effect 不应该分散在不同文件里。接下来我们把上面的代码连起来,放在同一个 Model 文件里,执行以下命令:

mkdir -p src/contacts/models/
touch src/contacts/models/contacts.ts

src/contacts/models/contacts.ts 的内容:

import { model } from '@modern-js/runtime/model';
import { get as contacts } from '@api/contacts';

type State = {
items: {
avatar: string;
name: string;
email: string;
archived?: boolean;
}[];
pending: boolean;
error: null | Error;
};

export default model<State>('contacts').define({
state: {
items: [],
pending: false,
error: null,
},
computed: {
archived: ({ items }: State) => items.filter(item => item.archived),
},
actions: {
archive(draft, payload) {
const target = draft.items.find(item => item.email === payload)!;
if (target) {
target.archived = true;
}
},
load: {
pending(draft) {
draft.pending = true;
},
rejected(draft, payload) {
draft.pending = false;
draft.error = payload;
},
fulfilled(draft, p) {
draft.items = p;
},
},
},
effects: {
async load() {
const { data } = await contacts();
return data;
},
},
});

我们把一个包含 state,action 等要素的 plain object 称作【 Model Spec 】,Modern.js 提供了 Model API,可以根据 Model Spec 生成【 Model 】。

本小节中,我们联系人列表项目需要的 Model 实现。下一小节我们将会学习如何使用 Model。