TinyBase 基础教程：监听 Store 数据变化-CSDN博客

TinyBase 基础教程：监听 Store 数据变化

tinybase The reactive data store for local‑first apps. 项目地址: https://gitcode.com/gh_mirrors/ti/tinybase

前言

在现代前端开发中，状态管理是一个核心概念。TinyBase 作为一个轻量级的状态管理库，提供了简洁而强大的 API 来管理应用状态。本文将深入探讨 TinyBase 中如何监听 Store 数据变化，这是构建响应式应用的关键技术。

监听器基础概念

在 TinyBase 中，监听器（Listener）是一种回调函数，当 Store 中的数据发生变化时会被自动调用。TinyBase 提供了层级分明的监听机制，可以监听从整个 Store 到单个 Cell 的各种粒度变化。

监听器类型概览

TinyBase 提供了多种监听器类型，覆盖了数据结构的各个层级：

键值对数据监听：

addValuesListener - 监听整个键值对集合
addValueIdsListener - 监听键集合变化
addValueListener - 监听单个键值变化

表格数据监听：

addTablesListener - 监听所有表格变化
addTableIdsListener - 监听表格ID集合变化
addTableListener - 监听单个表格变化
addTableCellIdsListener - 监听表格中所有Cell ID变化
addRowIdsListener - 监听行ID集合变化
addSortedRowIdsListener - 监听排序后的行ID集合变化
addRowListener - 监听单行变化
addCellIdsListener - 监听Cell ID集合变化
addCellListener - 监听单个Cell变化

此外，还有专门监听无效数据写入的监听器：

addInvalidValueListener - 监听无效键值写入
addInvalidCellListener - 监听无效Cell写入

监听器使用示例

基本监听示例

让我们从一个简单的例子开始，展示如何监听整个表格数据的变化：

import {createStore} from 'tinybase';

// 创建Store并初始化数据
const store = createStore().setTables({
  pets: {fido: {species: 'dog'}},
  species: {dog: {price: 5}},
});

// 添加表格监听器
const listenerId = store.addTablesListener(() => {
  console.log('表格数据发生了变化！');
});

// 修改数据会触发监听器
store.setCell('species', 'dog', 'price', 6);
// 控制台输出: '表格数据发生了变化！'

监听器触发条件

需要注意的是，监听器只有在数据实际发生变化时才会触发。如果设置的值与当前值相同，监听器不会被调用：

store.setCell('pets', 'fido', 'species', 'dog');
// 数据没有实际变化，监听器不会被调用

监听器清理

每个监听器注册后会返回一个ID，用于后续的监听器移除：

// 移除监听器
store.delListener(listenerId);

store.setCell('species', 'dog', 'price', 7);
// 监听器已被移除，不会触发

良好的编程习惯是及时清理不再需要的监听器，避免内存泄漏。

监听器参数详解

监听器回调函数可以接收多个参数，提供关于变化的详细信息：

const listenerId2 = store.addTablesListener((store, getCellChange) => {
  const change = getCellChange('species', 'dog', 'price');
  console.log('Cell变化详情:', change);
});

store.setCell('species', 'dog', 'price', 8);
// 输出: [true, 7, 8] 
// 表示: [是否变化, 旧值, 新值]

store.delListener(listenerId2);

行级监听示例

更细粒度的监听可以获取到变化的上下文信息：

const listenerId3 = store.addRowListener(
  'pets',
  'fido',
  (store, tableId, rowId) => {
    console.log(`${rowId}行在${tableId}表中发生了变化`);
  }
);

store.setCell('pets', 'fido', 'color', 'brown');
// 输出: 'fido行在pets表中发生了变化'

store.delListener(listenerId3);

通配符监听器

TinyBase 支持通配符监听器，可以监听某一层级的所有变化：

// 监听pets表中任何行的变化
const listenerId4 = store.addRowListener('pets', null, (store, tableId, rowId) => {
  console.log(`${rowId}行在${tableId}表中发生了变化`);
});

store.setCell('pets', 'fido', 'color', 'black');
// 输出: 'fido行在pets表中发生了变化'

store.delListener(listenerId4);