管理 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 (
     store["origami"].value = new Date().getSeconds()}>
      Origami Count: {origami}
    
  );
}

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