7、MobX 状态建模与核心特性深入解析

MobX 状态建模与核心特性深入解析

1. 商店建模思路

在使用 MobX 为 React 应用进行客户端状态建模时，这可能是一项艰巨的任务。不过，我们可以将应用视为一系列功能的集合，这些功能组合在一起形成一个紧密的整体。从最简单的功能开始，逐步将应用的其他部分串联起来。

这种思维方式引导我们首先对功能级别的存储进行建模。应用级别的存储（也称为根存储）是这些功能存储的组合，并带有一个共享的通信通道。在 MobX 中，我们通常从一个类开始描述功能存储。根据功能的复杂程度，我们可以将功能存储拆分为多个子存储，而功能存储则充当所有子存储的协调者，这是典型的分而治之的软件建模方法。

以在图书搜索应用中添加创建愿望清单的功能为例，愿望清单可以包含未来想要购买的物品，并且可以创建任意数量的愿望清单。下面我们将使用 MobX 对愿望清单功能进行建模，暂时不考虑 React 相关的内容，仅专注于使用 MobX 对客户端状态进行建模。

2. 愿望清单功能建模

2.1 可观察状态

首先，我们需要确定可观察状态和可以改变它的操作。可观察状态是指应用中会发生变化的状态，而操作则是用于改变这些状态的函数。

我们创建一个 WishListStore 类来跟踪愿望清单功能的所有细节，这是我们的功能级存储，包含了整个功能的可观察状态。核心可观察状态如下：
- 一个愿望清单数组，每个元素是 WishList 类的实例。
- WishList 类有一个名称和一个 WishListItem 实