ホームページ > 記事 > ウェブフロントエンド > Origami-State-Manager (OSM) の紹介: ボイラープレートを最小限に抑えた軽量の状態管理ライブラリ
JavaScript アプリケーションでグローバル状態を管理することは、特に React コンテキストと非 React コンテキストの両方でアクセスできる必要がある場合に困難になることがあります。既存のライブラリは多くの場合、重いセットアップや不必要な複雑さを伴い、React と密接に結合されています。しかし、紙を折るときの優雅さとシンプルさで状態を管理できたらどうでしょうか? Origami-State-Manager (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 中国語 Web サイトの他の関連記事を参照してください。