7、MobX 状态管理：可观察树的构建与深入理解

MobX 状态管理：可观察树的构建与深入理解

1. 商店建模

在使用 MobX 为 React 应用程序对客户端状态进行建模时，这似乎是一项艰巨的任务。可以从简单的认识入手，即应用程序是由一系列功能组合而成的一个内聚单元。从最简单的功能开始，一次添加一个功能，将应用的其余部分串联起来。

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

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

2. 愿望清单功能

愿望清单功能添加了创建愿望清单的能力。一个愿望清单有一个名称，并且包含一个未来要购买的物品列表。可以根据需要创建任意数量的愿望清单。一个愿望清单物品有物品的标题和一个用于跟踪是否已购买的标志。

使用 MobX 进行建模的第一步是确定可观察状态以及可以改变它的操作。目前，我们不考虑反应（或观察者）。

2.1 可观察状态

我们从一个WishListStore类开始，来跟踪愿望清单功能的所有详细信息。这是我们的功能级存储，包含了整个功能的可观察状态。根据前面的描述，核心可观察状态如下：
- 一个愿望清单数组，其中每个