JavaScript アプリケーションでグローバル状態を管理することは、特に React コンテキストと非 React コンテキストの両方でアクセスできる必要がある場合に困難になることがあります。既存のライブラリは多くの場合、重いセットアップや不必要な複雑さを伴い、React と密接に結合されています。しかし、紙を折るときの優雅さとシンプルさで状態を管理できたらどうでしょうか? Origami-State-Manager (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