管理 JavaScript 应用程序中的全局状态,尤其是当您需要跨 React 和非 React 上下文访问它时,可能具有挑战性。现有的库通常涉及繁重的设置、不必要的复杂性,并且与 React 紧密耦合。但是,如果您可以通过折纸的优雅和简单来管理状态呢?输入折纸状态管理器(OSM)。
Origami-State-Manager (OSM),发音为“棒极了”, 是一个轻量级状态管理库,设计简单、灵活且可扩展。受日本折纸艺术(将一张普通的纸转变成复杂的设计)的启发,OSM 使您能够以同样优雅的方式管理应用程序的全局状态。就像纸张一样,它非常轻巧,非常适合注重简单性和性能的应用程序。
构建 OSM 的旅程始于寻找一种解决方案,该解决方案可以:
如果您厌倦了过度设计的解决方案,并且想要能够正常工作的,OSM 可能是您需要的“很棒”的工具。
准备好向您的应用添加一些 OSM 功能了吗?以下是如何开始:
1。安装库:
npm install origami-state-manager
2。创建商店:
商店是全球所有状态所在的地方。设置就像将初始状态值传递给 createStore 一样简单:
// store.ts import { createStore } from "origami-state-manager"; const initialValues = { origami: 0, osmness: 0, }; export const store = createStore(initialValues);
您还可以通过提供商店名称来使商店持久化:
export const store = createStore(initialValues, "myOSMness");
3。访问和更新状态:
对于 React 组件,使用 useStateListener 钩子来访问和更新状态:
import { store } from "./store"; import { useStateListener } from "origami-state-manager"; function OrigamiComponent() { const origami = useStateListener("origami", store); return ( <button onClick={() => store["origami"].value = new Date().getSeconds()}> Origami Count: {origami} </button> ); }
4。非 React 函数中的访问状态:
您也可以轻松地使用 React 之外的状态:
// utils.js function getProfile() { let profile = store["profile"].value; if (!profile) { store["profile"].value = {}; } return store["profile"].value; }
OSM 非常适合以下场景:
OSM 仍处于早期阶段,尚未在所有环境中进行全面测试。虽然它非常适合小型项目和简单的国家需求,但建议在复杂场景中使用它时保持谨慎。如果您确实遇到任何问题,请报告它们,以便图书馆能够继续改进。
有兴趣帮助 OSM 变得更加出色吗?欢迎贡献!查看贡献指南以开始使用。
变更日志会定期更新所有新的更改和改进。
Origami-State-Manager (OSM) 旨在为全局状态管理提供一个简单而强大的解决方案,且不会造成臃肿。通过保持最少的设置和较高的性能,OSM 使您能够专注于构建功能,而不是与状态复杂性作斗争。
尝试一下,在您的项目中体验 OSM 性的新水平!
立即开始使用 OSM:npm:origami-state-manager
以上是介绍 Origami-State-Manager (OSM):具有最少样板的轻量级状态管理库的详细内容。更多信息请关注PHP中文网其他相关文章!