简介
microcosm 是一个适用于 JavaScript 应用程序的状态管理库。通过使用 microcosm，可以轻松地跟踪应用程序中的状态变化并快速更新应用程序视图。
microcosm 是一个轻量级的库，可以与其他框架和库（如 React、Vue 和 Angular）集成，因此可以很容易地将其添加到您的现有项目中。此外，它具有小巧、灵活、易于定制等优点，是一个十分强大的状态管理工具。
在本文中，我们将介绍如何使用 microcosm。
安装 microcosm
要开始使用 microcosm，您需要首先安装它。可以通过 npm 包管理器来安装 microcosm：
npm install microcosm
一旦成功安装了 microcosm，您就可以在项目中引入它：
import { Microcosm } from 'microcosm';现在，我们准备好开始使用 microcosm。
创建 Microcosm 实例
使用 microcosm 的第一步是创建 Microcosm 实例。Microcosm 构造器接受一个可选的配置对象。
一个最简单的示例：
import { Microcosm } from 'microcosm';
const app = new Microcosm();这样就创建了一个空的 Microcosm 实例。现在，我们将介绍一些常用的配置选项。
指定默认 state
您可以使用 defaultState 选项指定 Microcosm 实例的默认状态：
import { Microcosm } from 'microcosm';
const app = new Microcosm({
defaultState: {
count: 0,
},
});在这个例子中，初始化的默认状态是 { count: 0 }。
指定 devtools 配置
您可以使用 devtools 选项启用 devtools 支持。devtools 是一个浏览器插件，可帮助您更好地调试应用程序状态：
import { Microcosm } from 'microcosm';
const app = new Microcosm({
devtools: {
name: 'My App',
},
});在这个例子中，我们将应用程序的名称设置为 "My App"。devtools 支持还有很多其他选项，可以根据需求自行指定。
指定 middleware
Middleware 是一种实现 Microcosm 功能的方法，可以用于处理类似异步操作、日志记录等行为。您可以使用 middleware 选项添加 middleware 到 Microcosm 实例中。
-- -------------------- ---- ------- ------ - --------- - ---- ------------ ----- ------ - ----- -- ---- -- ------ -- - ------------------------ ----------------- ----- ------ - ------------- ----------------- ----- ----------------- ------ ------- -- ----- --- - --- ----------- ----------- --------- ---
在这个例子中，我们定义了一个简单的 logger middleware，打印出每次发生的 action 和状态变化。middleware 可以是任意数量，并以任意顺序应用于 action。
至此，我们已经完成了 Microcosm 实例的创建。下一步是添加 action 和 handler 到实例中。
添加 action 和 handler
在 microcosm 中，Action 表示应用程序状态的变化，Handler 是响应 action 的代码。
您可以使用 addAction 方法添加 action 到 Microcosm 实例中。action 通过对象字面量定义：
app.addAction('add', {
apply: (state, payload) => ({
count: state.count + payload.amount,
}),
});在这个例子中，我们定义了一个 add action，并将一个 payload 数量添加到当前的 count。
接着，我们将添加一个 handler，它将监听我们的 action 并执行相应的逻辑。
你可以使用 addHandler 方法添加 handler：
app.addHandler('add', (state, payload) => {
console.log(`added ${payload.amount}`);
});该示例中的 handler 监听 add action，并打印出 "added " 和负载的数量。
现在，我们准备开始调用 action。
调用 Action
调用 action 有许多方法，取决于您的需求。在 microcosm 中，您可以使用 dispatch 方法触发 action。一般来说，在 view 中使用 dispatch 是一个不错的起点。
app.dispatch('add', { amount: 1 });在这个例子中，我们触发了 add action，带有 {amount:1} 的负载。此调用将执行与 add action 关联的任何处理程序，并将更新状态。在这种情况下，应该向状态添加 1。
现在，我们说明了 Microcosm 的工作原理。下一步是介绍具有微妙复杂性的高级用例。
高级用例
自定义状态比较
默认情况下，Microcosm 比较状态(即检测状态变化)使用的是浅层比较方法。这意味着，如果状态的引用不变化，即使状态内部改变了，microcosm 也不会触发状态变化来重新渲染视图。你可以使用自定义方法来进行深层比较，这相当于将 handleClick 方法的 prop 与新旧状态进行深层比较。
import { isEqual } from 'lodash';
const app = new Microcosm({
comparisons: {
'todos.list': isEqual,
},
});在这个示例中，我们使用 Lodash 中的 isEqual 方法来比较 todos.list 对象内部发生的变化。
插件
Microcosm 使用插件来灵活扩展其功能。您可以使用预制的插件，也可以编写自己的插件。
预制插件是外部库，可使用 npm 发布。例如，我们可以使用 Microcosm 与 Redux 确定性 Redux Devtools：
import { devtools } from 'microcosm-redux-devtools';
import { Microcosm } from 'microcosm';
const app = new Microcosm();
app.addPlugin(devtools());在这个示例中，我们使用 microcosm-redux-devtools 插件扩展了 Microcosm。Plugin 是 Microcosm 中最强大的功能之一。它使您可以轻松地添加新功能、更改 Microcosm 的行为并向其添加新功能。有关 Microcosm 中插件的更多信息，请参阅官方文档。
现在，您已经了解 Microcosm 的基本操作并准备好在自己的项目中使用它了。microcosm 是一个强大、灵活且易于使用的状态管理库，可以显著简化您的应用程序开发，并提高代码复用性。我们希望您在学习使用 microcosm 时，能够更好地理解其工作原理并获得更好的开发经验。
结论
本文介绍了 microcosm 的基本使用、在实际应用中遇到的问题，以及如何解决问题。过程中，我们介绍了 Microcosm 的基础知识和高级应用，为您掌握这个库提供了坚实的基础。我们希望这篇文章能够为您提供指导和帮助，使您可以更好地利用 microcosm 建立跨框架、高 Quality 的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f441d8e776d08040ede