リアクトロック

リアクトロック

React-Rock は、React アプリケーションのグローバル状態を管理するための軽量パッケージです。ストアに行とメタデータを提供することでデータの処理を簡素化し、CRUD 操作などを実行するメソッドを提供します。 React コンポーネントと簡単に統合できるため、大規模なアプリケーションの複雑な状態を管理するための理想的なソリューションとなります。

インストール

React-Rock パッケージをインストールするには、プロジェクトで次のコマンドを実行します。

npm install react-rock

特徴

• グローバル ストア管理: グローバル ストア内の行とメタデータを管理します。
• CRUD 操作: 行に対して作成、読み取り、更新、削除の操作を実行します。
• メタ管理: メタデータを設定、取得、削除します。
• 最適化された再レンダリング: フリーズ オプションを使用してコンポーネントの再レンダリングを制御します。
• クラス コンポーネントのサポート: ストア データをクラス コンポーネントに統合するには StoreComponent を使用します。

基本的な例: ストアの作成とレコードの追加

新しいストアを作成してレコードを追加するには、createStore 関数を使用します。以下に例を示します:

import { createStore } from 'react-rock';

// Define RowType and MetaType
type RowType = { name: string, age: number };
type MetaType = { totalRecords: number };

// Create a store
const users = createStore<RowType, MetaType>({ name: '', age: 0 }, { totalRecords: 0 });

// Add a new row to the store
users.create({ name: 'John Doe', age: 30 });

RowType の説明

行が作成されると、次のプロパティが含まれます:

type RowType<Row> = Row & {
    _id: string;       // Unique identifier for the row
    _index: number;    // Index of the row in the store
    _observe: number;  // Internal property to track changes
}

各行には、元のデータ (行) と、_id、_index、_observe などの追加のプロパティが含まれます。

メソッド

使用可能なすべてのメソッドとその説明をまとめた表を以下に示します。

Method	Description
create(row, freeze?)	Adds a new record to the store. Optionally, prevents re-rendering if freeze is true.
createMany(rows, freeze?)	Adds multiple records to the store. Optionally, prevents re-rendering if freeze is true.
update(row, where, freeze?)	Updates records based on the condition specified in where.
updateAll(row, freeze?)	Updates all records in the store. Optionally, prevents re-rendering if freeze is true.
delete(where, freeze?)	Deletes records based on the condition specified in where.
move(oldIdx, newIdx, freeze?)	Moves a record from one index to another.
clearAll(freeze?)	Clears all records from the store. Optionally, prevents re-rendering if freeze is true.
getAll(args?)	Retrieves all rows from the store.
find(where, args?)	Finds rows based on a condition specified in where.
findFirst(where, freeze?)	Finds the first row that matches the condition in where.
findById(_id, freeze?)	Finds a row by its _id.
setMeta(key, value, freeze?)	Sets a value for a specific meta key.
getMeta(key, freeze?)	Retrieves the value of a specific meta key.
getAllMeta(freeze?)	Retrieves all meta data from the store.
deleteMeta(key, freeze?)	Deletes a specific meta key.
clearMeta(freeze?)	Clears all meta data from the store.

findメソッドの例

find メソッドを使用すると、特定の条件に基づいてストア内の行を検索できます。

npm install react-rock

React コンポーネントでの再レンダリング

React-Rock はフリーズ メカニズムを提供することで再レンダリングを最適化します。ストアの更新が発生し、フリーズ オプションが有効になっている場合、find や findFirst などのメソッドを使用してストアにアクセスする React コンポーネントは自動的に再レン​​ダリングされません。これにより、コンポーネントをいつ再レンダリングするかを制御できるようになり、大規模なアプリケーションのパフォーマンスが向上します。

WhereType

WhereType は、行をクエリするときに条件を指定するために使用されます。行をフィルタリングするためのクエリ構造を定義します。

クエリ値の種類

QueryValueType は、クエリの可能な条件を定義するために WhereType 内で使用されます。

Property	Description
contain	Finds values containing the specified string, number, or boolean.
startWith	Finds values that start with the specified string or number.
endWith	Finds values that end with the specified string or number.
equalWith	Finds values that are exactly equal to the specified value.
notEqualWith	Finds values that are not equal to the specified value.
gt	Finds values greater than the specified number.
lt	Finds values less than the specified number.
gte	Finds values greater than or equal to the specified number.
lte	Finds values less than or equal to the specified number.

WhereType の例

import { createStore } from 'react-rock';

// Define RowType and MetaType
type RowType = { name: string, age: number };
type MetaType = { totalRecords: number };

// Create a store
const users = createStore<RowType, MetaType>({ name: '', age: 0 }, { totalRecords: 0 });

// Add a new row to the store
users.create({ name: 'John Doe', age: 30 });

引数の種類

ArgsType は、特定の行の選択や行のスキップなど、クエリの動作をカスタマイズするためのオプションを定義します。

Property	Description
getRow	Custom function to process rows before returning them.
skip	Number of rows to skip.
take	Number of rows to return.
freeze	If true, prevents re-rendering when accessing the data.

クラスコンポーネントを使用した例

クラスコンポーネントでストアを使用するには、StoreComponent クラスを拡張します。

npm install react-rock

CRUDの例

import { createStore } from 'react-rock';

// Define RowType and MetaType
type RowType = { name: string, age: number };
type MetaType = { totalRecords: number };

// Create a store
const users = createStore<RowType, MetaType>({ name: '', age: 0 }, { totalRecords: 0 });

// Add a new row to the store
users.create({ name: 'John Doe', age: 30 });

find と Query の例

type RowType<Row> = Row & {
    _id: string;       // Unique identifier for the row
    _index: number;    // Index of the row in the store
    _observe: number;  // Internal property to track changes
}

複数のコンポーネントでのストアの使用例

React-Rock を使用すると、複数のコンポーネント間で同じストアを共有し、アプリ全体で一貫した状態を確保できます。

const foundUsers = users.find({ name: { equalWith: 'John Doe' } });
console.log(foundUsers);

種類の説明

• RowType: _id、_index、および _observe とユーザー定義のデータ フィールドを持つレコードを表します。
• ArgsType: スキップ、取得、カスタム行処理などの柔軟な行クエリのオプションを定義します。
• WhereType: contains、equalWith などのフィールド、および gt、lt などの範囲クエリを使用して、レコードをクエリするための条件を表します。
• QueryValueType: フィールド値に基づいて行をフィルター処理するために許可される条件タイプを指定します。

ライセンス

このパッケージは MIT ライセンスに基づいてライセンスされています。

---

このドキュメントでは、react-rock パッケージを効果的に使用する方法の簡潔な概要を提供します。

?貢献する

貢献は大歓迎です!投稿ガイドラインをご確認ください。

---

?ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。

以上がリアクトロックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。