首页  >  文章  >  web前端  >  介绍 Origami-State-Manager (OSM):具有最少样板的轻量级状态管理库

介绍 Origami-State-Manager (OSM):具有最少样板的轻量级状态管理库

王林
王林原创
2024-08-28 06:03:37257浏览

Introducing Origami-State-Manager (OSM): A Lightweight State Management Library with Minimal Boilerplate

管理 JavaScript 应用程序中的全局状态,尤其是当您需要跨 React 和非 React 上下文访问它时,可能具有挑战性。现有的库通常涉及繁重的设置、不必要的复杂性,并且与 React 紧密耦合。但是,如果您可以通过折纸的优雅和简单来管理状态呢?输入折纸状态管理器(OSM)


什么是OSM?

Origami-State-Manager (OSM),发音为“棒极了”, 是一个轻量级状态管理库,设计简单、灵活且可扩展。受日本折纸艺术(将一张普通的纸转变成复杂的设计)的启发,OSM 使您能够以同样优雅的方式管理应用程序的全局状态。就像纸张一样,它非常轻巧,非常适合注重简单性和性能的应用程序。


为什么选择 OSM?

构建 OSM 的旅程始于寻找一种解决方案,该解决方案可以:

  • 最小化样板文件:状态管理应该简单明了,并且需要尽可能少的设置。
  • 多才多艺:在 React 和非 React 上下文中无缝工作。
  • 保持轻量级:避免使用不必要的代码使您的包变得臃肿。
  • 保持灵活性和可扩展性:在保持性能的同时轻松适应不同的项目需求。

如果您厌倦了过度设计的解决方案,并且想要能够正常工作的,OSM 可能是您需要的“很棒”的工具。


主要特点

  • 最少的设置: 使用干净、直观的 API 快速定义和管理您的全局状态。
  • React 和非 React 兼容性: 可以从 React 组件和纯 JavaScript 函数访问和更新状态。
  • 轻量级: 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 非常适合以下场景:

  • 您需要一个轻量级解决方案来进行简单的全局状态管理。
  • 您的项目涉及必须共享全局状态的 React 和非 React 逻辑。
  • 您希望避免 Redux 或 MobX 等大型库的复杂性。

注意:前面有一些糟糕的事情!

OSM 仍处于早期阶段,尚未在所有环境中进行全面测试。虽然它非常适合小型项目和简单的国家需求,但建议在复杂场景中使用它时保持谨慎。如果您确实遇到任何问题,请报告它们,以便图书馆能够继续改进。


为 OSM 做出贡献

有兴趣帮助 OSM 变得更加出色吗?欢迎贡献!查看贡献指南以开始使用。


保持更新

变更日志会定期更新所有新的更改和改进。


最后的想法

Origami-State-Manager (OSM) 旨在为全局状态管理提供一个简单而强大的解决方案,且不会造成臃肿。通过保持最少的设置和较高的性能,OSM 使您能够专注于构建功能,而不是与状态复杂性作斗争。

尝试一下,在您的项目中体验 OSM 性的新水平!

立即开始使用 OSM:npm:origami-state-manager


以上是介绍 Origami-State-Manager (OSM):具有最少样板的轻量级状态管理库的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn