首頁 > web前端 > js教程 > 主體

介紹 Origami-State-Manager (OSM):最少樣板的輕量級狀態管理庫

王林
發布: 2024-08-28 06:03:37
原創
256 人瀏覽過

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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!