3、MobX 状态管理入门：深入理解可观察对象、动作与反应

MobX 状态管理入门：深入理解可观察对象、动作与反应

一、MobX 概述

MobX 可以被看作是一种更具声明性的 Redux。它无需动作创建器、减速器或中间件来处理动作和生成新状态。动作、副作用（反应）和可观察状态都位于类或模块内部，也不需要复杂的 connect() 方法将 React 组件连接到存储，简单的 observer() 就能完成任务，无需额外的连接操作。

1.1 MobX 简化工作流

MobX 简化了与 Redux 相关的工作流，一些显式的设置不再必要，例如容器组件中使用 connect() 、使用 reselect 进行记忆化状态选择、动作、减速器以及中间件等。

1.2 数据流动与心智模型

UI 是数据（状态）的可视化呈现，同时包含用于更改该状态的交互控件。UI 触发动作，从而导致状态改变。副作用是由某些状态变化触发的外部操作。系统中有观察者会留意特定的状态变化，并执行相应的副作用。

数据流动遵循“动作 –> 状态 –> UI”的三元组，再加上副作用，形成了一个简单的 UI 心智模型。MobX 严格遵循这个心智模型，其 API 中体现了可观察对象、动作、反应和观察者。这种 API 的简单性使得处理 UI 中的一些复杂交互变得容易。

与 Redux 相比，MobX 减少了引发状态变化和处理副作用所需的繁琐操作。它致力于提供一种声明性和响应式的状态管理 API，同时不牺牲简单性。

二、MobX 核心概念：可观察对象、动作与反应