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