TinyBase × React UI: 状態管理をシンプルに統合する方法
TinyBase × React UI: 状態管理をシンプルに統合する方法
TinyBase は、軽量かつ柔軟なデータストアを提供するライブラリです。特に React との統合に優れており、複雑な状態管理をシンプルかつパフォーマンス良く実現できます。
本記事では、TinyBase を React UI に統合する方法を、具体的なコード例 を交えながら解説します。
TinyBase + React UI の準備
まずは、TinyBase の React 用モジュール ui-react をインストールしましょう。
npm install tinybase ui-react react react-dom
この ui-react を使うことで、TinyBase のデータを React の hooks やコンポーネントとして扱える ようになります。
TinyBase のデータを React で使う
React Hooks で TinyBase のデータを取得
TinyBase の ui-react には、データストアの値を取得するための 専用 Hooks が用意されています。
| Hook | 役割 |
|---|---|
useCell |
指定したテーブルのセルの値を取得する |
useValues |
ストア全体の値を取得する |
useTable |
指定したテーブルのデータを取得する |
以下のコードは、useCell を使ってデータを取得し、React コンポーネントに表示する例です。
import React from 'react';
import { useCell } from 'tinybase/ui-react';
import { createStore } from 'tinybase/store';
// データストアを作成し、'pets' テーブルの 'fido' 行に 'color' セルを追加
const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const App = () => {
// useCell で 'color' セルの値を取得
const color = useCell('pets', 'fido', 'color', store);
return <div>Fido's color: {color}</div>;
};
export default App;
📝 ポイント
-
useCellは指定したセルの値を取得し、変更があれば自動で再レンダリングされる -
storeを直接渡すことで、どの TinyBase ストアを参照するか指定できる
React コンポーネントから TinyBase のデータを変更する
データを変更するには useSetCellCallback を使います。
これを利用すると、イベントをトリガーにしてデータを更新できます。
import React from 'react';
import { useSetCellCallback, useCell } from 'tinybase/ui-react';
import { createStore } from 'tinybase/store';
// 初期データとして、'pets' テーブルに 'sold' 状態を追加
const store = createStore().setCell('pets', 'fido', 'sold', false);
const App = () => {
// useSetCellCallback でボタンが押されたときに 'sold' を更新
const handleClick = useSetCellCallback(
'pets', 'fido', 'sold',
(event: React.MouseEvent) => event.bubbles, // クリックイベントを元に true / false を切り替え
[], store
);
return (
<div>
Sold: {useCell('pets', 'fido', 'sold', store) ? 'yes' : 'no'}
<button onClick={handleClick}>Sell</button>
</div>
);
};
export default App;
📝 ポイント
-
useSetCellCallbackを使うと、イベント発生時に TinyBase のデータを変更できる -
useCellにより、変更されたデータが即座に UI に反映される
TinyBase の UI コンポーネントを活用する
TinyBase には データを直接表示できる便利な UI コンポーネント があります。
| コンポーネント | 役割 |
|---|---|
CellView |
特定のセルの値を表示する |
RowView |
1行のデータを表示する |
TableView |
テーブル全体を表示する |
例えば、CellView を使うと、useCell を使わずにセルの値を直接表示できます。
import React from 'react';
import { CellView } from 'tinybase/ui-react';
import { createStore } from 'tinybase/store';
const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const App = () => (
<div>
Fido's color: <CellView tableId="pets" rowId="fido" cellId="color" store={store} />
</div>
);
export default App;
💡 メリット
-
CellViewは TinyBase のデータが変わるたびに自動で UI を更新してくれる - 手動で
useCellを使わなくても、データの変更をリアルタイムに反映可能
TinyBase を React のコンテキストとして扱う
Provider を使うと、store を明示的に渡さなくても、アプリ全体で TinyBase のデータを共有できます。
import React from 'react';
import { CellView, Provider } from 'tinybase/ui-react';
import { createStore } from 'tinybase/store';
const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const App = () => (
<Provider store={store}>
<div>
Fido's color: <CellView tableId="pets" rowId="fido" cellId="color" />
</div>
</Provider>
);
export default App;
💡 メリット
-
Providerを使うと、どのコンポーネントでも TinyBase のデータにアクセスできる -
store={store}を都度渡す必要がなくなり、コードがスッキリする
まとめ
TinyBase を React UI に統合すると、シンプルかつ効率的な状態管理 が可能になります。
特に hooks を活用したリアクティブなデータ管理 と UI コンポーネントの利用 によって、直感的な開発ができるのが特徴です。
✔ 今日の学び
✅ useCell, useSetCellCallback を使えば、React のコンポーネントと TinyBase を簡単に接続できる
✅ CellView などの UI コンポーネントを使うと、データ表示を簡単に管理できる
✅ Provider を使うと、ストアをアプリ全体で共有しやすくなる
TinyBase を活用して、よりスマートな React アプリ開発を楽しんでください！ 🚀
用語索引
📌 TinyBase - 軽量なインメモリデータストア
📌 ui-react - TinyBase を React で使うためのモジュール
📌 useCell - TinyBase のセルの値を取得する hook
📌 useSetCellCallback - TinyBase のデータを変更する hook
📌 CellView - TinyBase のデータを表示するコンポーネント
📌 Provider - TinyBase のストアを React アプリ全体で共有するためのコンポーネント
記事を読んで TinyBase の魅力を感じてもらえたら嬉しいです！ 😊
Discussion