?系列文章目录?
上一篇文章MST基础中简单地介绍了MST的几个基本概念和相关API，本文将带大家搭配React实现一个TodoList。
准备工作
为了省去枯燥的项目搭建过程，本文选择使用stackblitz平台来编辑我们的代码。
TS+React+MST Starter
同学们可以点击上面的地址fork一个starter项目，项目中已经配置好MST以及React相关的依赖，并且包含了一个简单的Counter demo，后面将在这个starter的基础上进行开发。
项目结构&规范说明
从上面的地址进入后，你会得到一个包含以下目录结构的初始项目。
其中，目录components用于存放React组件，目录models用于存放MST Model。
整个应用的Root Model在models/index.ts文件中定义：
import { types } from 'mobx-state-tree';
import { Counter } from './Counter';
export const Root = types
.model('Root', {
counter: types.optional(Counter, {}),
});
复制代码定义好的Root Model会在项目的入口index.tsx文件中被引入，并创建实例对象，然后使用mobx-react提供的Provider组件将Root Model的实例对象传递到应用的Context中：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import { Root } from './models';
import { ModelInjector } from './components/ModelInjector';
import './style.css';
import { Counter } from './components/Counter';
const root = Root.create({});
const ConnectedCounter = () => (
{(root) => }
);
function App () {
return (
);
}
render(项目提供了一个名为ModelInjector的组件，index.tsx代码中，使用ModelInjector组件对Counter组件进行了一个包装，将root.counter这个节点Model作为props传给了Counter组件。在本文以及后续的文章中，将会沿用这样的方式在组件与Model之间建立连接。
这样做的好处是，可以让TypeScript的静态类型约束覆盖到整个应用，开发过程中可以享受到类型带来的便利：
ModelInjector组件的实现比较简单，可以在项目中自行查看。
确定目标
在开始动手编码之前，必须明确要做的这个东西是什么样的。
我们要做的这款TodoList大家应该比较熟悉：
这款TodoList来自TodoMVC。
由于本文的主题不在UI的实现上，我们可以复用他的DOM结构和CSS，这会省去不少功夫。
定义Model
明确要做什么之后，就可以着手开始分析这个应用的状态结构了。
TodoItem
从最基础的开始。TodoList的基本单位就是TodoItem，TodoItem具备的属性是他的id（用于编辑、删除时进行跟踪）、title，以及是否完成的标识done，所以可以得出：
// models/TodoItem.ts
import { types, Instance } from 'mobx-state-tree';
export const TodoItem = types
.model('TodoItem', {
id: types.string,
title: types.string,
done: types.boolean,
})
.actions(self => ({
switchDone(done?: boolean) {
if (typeof done === 'boolean') {
self.done = done;
} else {
self.done = !self.done;
}
}
}));
export type TodoItemInstance = Instance<typeof TodoItem>;
复制代码新建models/TodoItem.ts文件，写入上面的代码。
细心的同学会发现，上面代码中还export了一个type定义TodoItemInstance。这个type表示的是TodoItem这个Model的实例类型，可以在定义React组件的props类型时使用。
TodoForm
应用还需要一个输入框，在新增的时候输入新TodoItem的title；以及一个可隐藏的输入框用来编辑已有TodoItem的title。
这两个输入框的功能相似，都是维护输入框的值并处理值的更新。不同的是编辑输入框会与某一个TodoItem关联，而新增输入框没有关联对象。
可以使用一个TodoForm的Model来维护两个输入框的状态：
// models/TodoForm.ts
import { types, Instance } from 'mobx-state-tree';
import { TodoItemInstance } from './TodoItem';
export const TodoForm = types
.model('TodoForm', {
value: types.optional(types.string, ''),
targetTodoId: types.optional(types.maybeNull(types.string), null),
})
.views(self => ({
get trimedValue () {
return self.value.trim();
},
get valid() {
return this.trimedValue.length > 0;
}
}))
.actions(self => ({
setTarget(target: TodoItemInstance) {
self.value = target.title;
self.targetTodoId = target.id;
},
update(value: string) {
self.value = value;
},
reset() {
self.value = '';
self.targetTodoId = null;
}
}));
export type TodoFormInstance = Instance<typeof TodoForm>;
复制代码TodoForm中，使用value维护输入框的值，targetTodoId表示当前关联的TodoItem的id。并提供了用于关联TodoItem的setTarget方法，更新值的update方法以及重置状态的reset方法。
这里使用了types.optional为状态设置了初始值。
另外还提供了两个计算值：trimedValue以及valid。
这里需要注意的是，在valid的定义中，trimedValue引用的是this而不是self，这是由于valid以及trimedValue两者的定义写在同一个views方法中，在views方法结束前，TypeScript的类型系统并不能观察到self对应的类型中包含valid或者trimedValue，所以需要使用this来代替self。
除了views之外，actions或者volatile也需要注意上面这个问题。
TodoList
完成上面的两个Model之后，剩下的都是一些与列表相关的状态了。将TodoItem与TodoForm进行组合，构成整个TodoList应用的基本Model：
// models/TodoList.ts
import { types } from 'mobx-state-tree';
import { TodoItem } from './TodoItem';
import { TodoForm } from './TodoForm';
export const TodoList = types
.model('TodoList', {
adderForm: types.optional(TodoForm, {}),
editorForm: types.optional(TodoForm, {}),
list: types.array(TodoItem),
});
复制代码其中adderForm与editorForm分别表示新增Todo与编辑Todo的表单Model，list用于管理Todo列表。
仔细观察目标的成品图，他还包括三个筛选按钮All、Active、Completed，用于筛选展现的Todo列表的类型，这里可以将三种类型定义为枚举TodoFilterType，新建enums.ts文件，输入代码：
// enums.ts
export enum TodoFilterType {
All = 'All',
Active = 'Active',
Completed = 'Completed'
}
复制代码然后为TodoList新增一个filterType的状态：
// models/TodoList.ts
import { types } from 'mobx-state-tree';
import { TodoItem } from './TodoItem';
import { TodoForm } from './TodoForm';
import { TodoFilterType } from '../enums';
export const TodoList = types
.model('TodoList', {
adderForm: types.optional(TodoForm, {}),
editorForm: types.optional(TodoForm, {}),
list: types.array(TodoItem),
filterType: types.optional(types.string, TodoFilterType.All),
});
复制代码有了这几个基础状态，就可以得到其他几个衍生状态：
// models/TodoList.ts
...
export const TodoList = types
.model('TodoList', {
...
})
.views(self => ({
// 已完成的Todo列表
get doneList() {
return self.list.filter(i => i.done);
},
// 未完成的Todo列表
get activeList() {
return self.list.filter(i => !i.done);
},
// 是否全部完成
get isAllDone() {
return this.doneList.length === self.list.length;
},
// 剩余未完成的Todo数量
get activeCount() {
return this.activeList.length;
},
// 当前展现的Todo列表
get showList() {
switch (self.filterType) {
case TodoFilterType.Active:
return this.activeList;
case TodoFilterType.Completed:
return this.doneList;
default:
return self.list;
}
},
// 是否显示主体UI（没有Todo数据的时候只显示一个新增输入框）
get isShowMain() {
return self.list.length > 0;
},
// 是否包含已完成的Todo，用于控制右下角[Clear completed]按钮的展现和隐藏
get hasDoneTodos() {
return this.doneList.length > 0;
}
}))
复制代码最后，再补上更新状态的actions：
// models/TodoList.ts
import { types, cast, Instance } from 'mobx-state-tree';
import uuid from 'uuid/v1';
...
export const TodoList = types
.model('TodoList', {
...
})
.views(self => ({
...
})
.actions(self => ({
// 切换全部完成/全部未完成
switchAllDone(done?: boolean) {
if (typeof done !== 'boolean') {
done = !self.isAllDone;
}
self.list.forEach(item => {
item.switchDone(done);
});
},
// 切换列表过滤类型
setFilterType(filterType: TodoFilterType) {
self.filterType = filterType;
},
// 新增Todo
addTodo() {
if (self.adderForm.valid) {
self.list.push(cast({
id: uuid(),
title: self.adderForm.trimedValue,
done: false
}));
self.adderForm.reset();
}
},
// 更新Todo
updateTodo() {
if (self.editorForm.valid) {
const item = self.list.find(i => i.id === self.editorForm.targetTodoId);
if (item) {
item.title = self.editorForm.trimedValue;
}
self.editorForm.reset();
}
},
// 删除Todo
removeTodo(todoId: string) {
const index = self.list.findIndex(i => i.id === todoId);
if (index >= 0) {
self.list.splice(index, 1);
}
},
// 清除已完成Todos
clearDone() {
self.list = cast(self.list.filter(i => !i.done));
}
}));
export type TodoListInstance = Instance<typeof TodoList>;
复制代码上面的代码在给一些状态赋值的时候，用到了MST提供的cast方法，这个方法仅在TypeScript中有意义，因为他仅仅是将入参的类型转换成对应的状态的类型，使得代码的类型能通过TypeScript的检测（因为在TypeScript看来，没有cast的时候，等号左侧和右侧的两个值并不是类型匹配的）。
另外，在新增Todo的时候，使用了uuid库提供的方法生成Todo的唯一id。注意在项目中安装uuid依赖。
本实例中还依赖了classnames库，也需要一并安装。由于uuid以及classnames库都不包含类型定义文件（*.d.ts），在项目中新增了一个modules.d.ts文件，代码如下：
// modules.d.ts
declare module 'classnames';
declare module 'uuid/v1';
复制代码更新Root
要在应用中使用上面定义的Model，还需要将他们加入到状态树中，更新models/index.ts文件：
// models/index.ts
import { types } from 'mobx-state-tree';
import { TodoList } from './TodoList';
export const Root = types
.model('Root', {
todoList: types.optional(TodoList, {}),
});
复制代码至此，这个TodoList实例的状态树就构造完成了。
实现UI组件
UI方面并不是本系列文章的重点，并且本文TodoList的UI实现比较简单，套用了TodoMVC的DOM结构和CSS，本文中只对几个关键的点做一下说明，完整的代码见文末。
尽可能地使用observer装饰组件
使用mobx-react包提供的observer装饰器装饰后的组件能响应observable的变化，并做了诸多的性能优化，尽可能为你的组件加上observer，除非你想要自定义shouldComponentUpdate来控制组件更新时机。
尽可能地编写无状态组件
有的同学可能看到过类似这样的说法：
用Redux管理全局状态，用组件State管理局部状态。
笔者不认同这种说法，根据笔者的经验来看，当项目复杂到一定的程度，使用State管理的状态会难受到让你抓狂：某个深层次的组件State只能通过改变上层组件传递的props来进行更新。
更何况，现在无状态（state less）组件越来越受到大家的认可，react hooks的出现也顺应了组件无状态的这个发展趋势。
当应用都由无状态组件构成，应用的状态都存储在触手可及的地方（如Redux或MST），想要在某些时刻修改某个状态值就变得轻而易举。
这也是上文中，将输入框的值维护在TodoForm中的一个重要原因。
在线运行&完整代码
完整代码可点击此处查看，或者直接查看运行结果。
小结
本文使用MST搭配React构建了一个完整的TodoList应用，不知道同学们有没有体会到MST的魅力：
- 简单
- 最小化State
- 可组合
- 可复用
当然，本文只是一个开胃菜，还有更多优雅的特性等待后面的文章中慢慢去挖掘。
喜欢本文欢迎关注和收藏，转载请注明出处，谢谢支持。