管理 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