快速开始

TanStack Store 首先是一个不依赖于框架的信号（signals）实现。

它可以与我们任何框架适配器一起使用，也可以在原生 JavaScript 或 TypeScript 中使用。它目前被用于支持我们许多库的内部功能。

Store

您将首先创建一个新的 store 实例，这是一个围绕您的数据的包装器。

typescript

import { Store } from '@tanstack/store';

const countStore = new Store(0);

console.log(countStore.state); // 0
countStore.setState(() => 1);
console.log(countStore.state); // 1

import { Store } from '@tanstack/store';

const countStore = new Store(0);

console.log(countStore.state); // 0
countStore.setState(() => 1);
console.log(countStore.state); // 1

这个 Store 然后可以用来跟踪数据的更新。

typescript

const unsub = countStore.subscribe(() => {
  console.log('The count is now:', countStore.state);
});

// Later, to cleanup
unsub();

const unsub = countStore.subscribe(() => {
  console.log('The count is now:', countStore.state);
});

// Later, to cleanup
unsub();

您甚至可以在数据更新之前转换它。

typescript

const count = new Store(12, {
  updateFn: (prevValue) => (updateValue) => {
    return updateValue(prevValue) + previous;
  }
});

count.setState(() => 12);
// count.state === 24

const count = new Store(12, {
  updateFn: (prevValue) => (updateValue) => {
    return updateValue(prevValue) + previous;
  }
});

count.setState(() => 12);
// count.state === 24

并实现原始形式的派生状态。

typescript

let double = 0;
const count = new Store(0, {
  onUpdate: () => {
    double = count.state * 2;
  }
})

let double = 0;
const count = new Store(0, {
  onUpdate: () => {
    double = count.state * 2;
  }
})

批量更新

您可以使用 batch 函数来批量更新 store。

typescript

import { batch } from '@tanstack/store';

// countStore.subscribers will only trigger once at the end with the final state
batch(() => {
  countStore.setState(() => 1);
  countStore.setState(() => 2);
});

import { batch } from '@tanstack/store';

// countStore.subscribers will only trigger once at the end with the final state
batch(() => {
  countStore.setState(() => 1);
  countStore.setState(() => 2);
});

Derived

您还可以使用 Derived 类来创建派生值，这些值会在依赖项更改时惰性更新。

typescript

const count = new Store(0);

const double = new Derived({
  fn: () => count.state * 2,
  // Must explicitly list dependencies
  deps: [count]
});

// Must mount the derived value to start listening for updates
const unmount = double.mount();

// Later, to cleanup
unmount();

const count = new Store(0);

const double = new Derived({
  fn: () => count.state * 2,
  // Must explicitly list dependencies
  deps: [count]
});

// Must mount the derived value to start listening for updates
const unmount = double.mount();

// Later, to cleanup
unmount();

上一个派生值

您可以通过使用传递给 fn 函数的 prevVal 参数来访问派生计算的上一个值。

typescript

const count = new Store(1);

const double = new Derived({
  fn: ({ prevVal }) => {
    return count.state + (prevVal ?? 0);
  },
  deps: [count]
});

double.mount();
double.state; // 1
count.setState(() => 2);
double.state; // 3

const count = new Store(1);

const double = new Derived({
  fn: ({ prevVal }) => {
    return count.state + (prevVal ?? 0);
  },
  deps: [count]
});

double.mount();
double.state; // 1
count.setState(() => 2);
double.state; // 3

依赖项值

您可以通过使用传递给 fn 函数的 prevDepVals 和 currDepVals 参数来访问派生计算的依赖项值。

typescript

const count = new Store(1);

const double = new Derived({
  fn: ({ prevDepVals, currDepVals }) => {
    return (prevDepVals[0] ?? 0) + currDepVals[0];
  },
  deps: [count]
});

double.mount();
double.state; // 1
count.setState(() => 2);
double.state; // 3

const count = new Store(1);

const double = new Derived({
  fn: ({ prevDepVals, currDepVals }) => {
    return (prevDepVals[0] ?? 0) + currDepVals[0];
  },
  deps: [count]
});

double.mount();
double.state; // 1
count.setState(() => 2);
double.state; // 3

副作用

您还可以使用 Effect 类来管理多个 store 和派生值之间的副作用。

typescript

const effect = new Effect({
  fn: () => {
    console.log('The count is now:', count.state);
  },
  // Array of `Store`s or `Derived`s
  deps: [count],
  // Should effect run immediately, default is false
  eager: true
})

// Must mount the effect to start listening for updates
const unmount = effect.mount();

// Later, to cleanup
unmount();

const effect = new Effect({
  fn: () => {
    console.log('The count is now:', count.state);
  },
  // Array of `Store`s or `Derived`s
  deps: [count],
  // Should effect run immediately, default is false
  eager: true
})

// Must mount the effect to start listening for updates
const unmount = effect.mount();

// Later, to cleanup
unmount();

Store

批量更新

Derived

上一个派生值

依赖项值

副作用

订阅 Bytes

订阅 Bytes