TinyBase多Store类型定义的最佳实践

前言

TinyBase是一个轻量级的客户端状态管理库，其强大的类型系统为开发者提供了良好的类型安全保证。但在实际开发中，当我们需要管理多个具有不同Schema的Store时，类型定义可能会变得复杂。本文将详细介绍在TinyBase中如何优雅地处理多Store的类型定义问题。

基础概念

在TinyBase中，每个Store可以定义自己的TablesSchema和ValuesSchema。Schema定义了Store中数据的结构和类型，为后续的类型检查提供基础。

单Store类型定义

对于单个Store，类型定义相对简单：

import * as UiReact from 'tinybase/ui-react/with-schemas';
import {type NoValuesSchema, createStore} from 'tinybase/with-schemas';

const TABLES_SCHEMA = {
  table1: {name: {type: 'string', default: ''}},
} as const;

type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
const {Provider, useCreateStore} = UiReact as UiReact.WithSchemas<Schemas>;

多Store类型定义挑战

当应用需要多个Store时，每个Store可能有不同的Schema，这时类型定义会变得复杂。主要挑战在于：

1. 如何为每个Store定义独立的Schema
2. 如何在一个Provider中管理多个Store
3. 如何在使用时正确获取类型提示

解决方案

方案一：独立组件模式

推荐的做法是为每个Store创建独立的React组件，这些组件负责初始化Store并将其注入到Provider中：

// JournalStore.tsx
import * as UiReact from 'tinybase/ui-react/with-schemas';

const TABLES_SCHEMA = {
  journal: {date: {type: 'number'}, content: {type: 'string'}}
} as const;

type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
const {useCreateStore} = UiReact as UiReact.WithSchemas<Schemas>;

export const journalStore = createStore().setTablesSchema(TABLES_SCHEMA);

export function JournalStoreProvider() {
  useCreateStore(() => journalStore);
  return null;
}

然后在根组件中组合使用：

function App() {
  return (
    <>
      <JournalStoreProvider />
      <SettingsStoreProvider />
      {/* 其他组件 */}
    </>
  );
}

这种方式的优点是：

• 每个Store的类型定义独立清晰
• 易于维护和扩展
• 可以单独导出Store实例供其他代码使用

方案二：单文件多Store模式

如果希望在单个文件中管理多个Store，可以采用类型断言的方式：

import * as UiReact from 'tinybase/ui-react/with-schemas';

// 定义第一个Store的Schema
const SCHEMA_1 = {
  table1: {field1: {type: 'string'}}
} as const;
type Schemas1 = [typeof SCHEMA_1, NoValuesSchema];
const {useCreateStore: useCreateStore1} = UiReact as UiReact.WithSchemas<Schemas1>;

// 定义第二个Store的Schema
const SCHEMA_2 = {
  table2: {field2: {type: 'number'}}
} as const;
type Schemas2 = [typeof SCHEMA_2, NoValuesSchema];
const {useCreateStore: useCreateStore2} = UiReact as UiReact.WithSchemas<Schemas2>;

// 使用any类型定义Provider
const {Provider} = UiReact as UiReact.WithSchemas<any>;

function MultiStoreProvider({children}: {children: ReactNode}) {
  const store1 = useCreateStore1(() => createStore().setTablesSchema(SCHEMA_1));
  const store2 = useCreateStore2(() => createStore().setTablesSchema(SCHEMA_2));
  
  return <Provider storesById={{store1, store2}}>{children}</Provider>;
}

类型安全使用Store

定义好Store后，使用时需要确保类型安全：

// 在使用处定义类型化的hooks
const {useCell: useJournalCell} = 
  UiReact as UiReact.WithSchemas<[typeof JournalSchema, NoValuesSchema]>;

function MyComponent() {
  const value = useJournalCell('journalTable', 'row1', 'field1', 'journalStore');
  // 现在value有正确的类型提示
}

处理Values类型

对于Values的定义和使用，同样需要类型安全：

const VALUES_SCHEMA = {
  preference1: {type: 'string'},
  preference2: {type: 'number'}
} as const;

type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
const {useValue} = UiReact as UiReact.WithSchemas<Schemas>;
type ValueIds = keyof typeof VALUES_SCHEMA;

function usePreferenceValue(valueId: ValueIds) {
  return useValue(valueId, 'preferencesStore');
}

处理索引和关系类型

虽然TinyBase没有直接提供索引和关系的类型定义，但我们可以手动定义：

type IndexIds = 'InstitutionsByDate' | 'OtherIndex';
type RelationshipIds = 'AssetsInstitution' | 'OtherRelationship';

function useCustomSlices(indexId: IndexIds) {
  return useSliceIds(indexId, customIndexes);
}

最佳实践总结

1. 优先考虑独立组件模式，每个Store有独立的定义文件
2. 为每个Store定义清晰的Schema和类型别名
3. 在使用处通过类型断言获取类型安全的hooks
4. 对于复杂场景，可以适当使用any类型简化Provider定义
5. 手动定义索引和关系的类型以确保类型安全

结语

TinyBase的类型系统虽然强大，但在多Store场景下需要开发者投入一些精力来确保类型安全。通过本文介绍的模式，开发者可以构建出既类型安全又易于维护的状态管理架构。随着对TinyBase理解的深入，开发者可以进一步探索更复杂的类型模式，以满足特定应用场景的需求。