快速开始

TanStack Store 首先是一个与框架无关的信号实现。

它可以与我们的任何框架适配器一起使用，也可以在原生 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;
  }
});

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

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

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

Effects

您还可以使用 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

先前派生值

依赖值

Effects

订阅 Bytes

订阅 Bytes