@ ariakit/ react- store (英语)

重要内容: 这个软件包是Ariakit的内部依赖性,不遵循语义化的版本,意思是断裂变化可能发生在补丁和小版本中. 你也许想用 @ariakit/react 换句话说.

Ariakit商店原始物的回放装订.

目录

• 安装
• 使用量
• API 参考

安装

npm i @ariakit/react-store

使用量

从包根导入商店钩子 :

import { useStoreState } from "@ariakit/react-store";

这一一揽子方案只采用无害环境管理,并暴露出单一的公众切入点.

API 参考

• UseState
• useStoreState
• useStoreStateObject
• useStoreProps
• useStore
• Store

UseState

interface UseState<S> {
  /**
   * Re-renders the component when state changes and returns the current state.
   * @deprecated Use
   *   [`useStoreState`](https://ariakit.com/reference/use-store-state) instead.
   * @example
   * const state = store.useState();
   */
  (): S;
  /**
   * Re-renders the component when the state changes and returns the current
   * state given the passed key. Changes on other keys will not trigger a
   * re-render.
   * @param key The state key.
   // ... 15 more lines
   * const foo = store.useState((state) => state.foo);
   */
  <V>(selector: (state: S) => V): V;
}

useStoreState

type StateStore<T = CoreStore<any>> = T | null | undefined;

type StateKey<T = CoreStore<any>> = keyof StoreState<T>;

type SelectorStateKey<T> = T extends CoreStore ? StateKey<T> : never;

type SelectorState<T, K extends PropertyKey> = T extends CoreStore
  ? Pick<StoreState<T>, Extract<K, StateKey<T>>>
  : never;

function useStoreState<T extends CoreStore>(store: T): StoreState<T>;
function useStoreState<T extends CoreStore>(
  store: StateStore<T>,
): StoreState<T> | undefined;
function useStoreState<T extends CoreStore, K extends StateKey<T>>(
  store: T,
  key: K,
): StoreState<T>[K];
function useStoreState<T extends CoreStore, K extends StateKey<T>>(
  store: StateStore<T>,
  key: K,
): StoreState<T>[K] | undefined;
function useStoreState<T extends CoreStore, V>(
  store: T,
  selector: (state: StoreState<T>) => V,
): V;
function useStoreState<T extends CoreStore, V>(
  store: StateStore<T>,
  selector: (state?: StoreState<T>) => V,
): V;
function useStoreState<T extends CoreStore, K extends SelectorStateKey<T>, V>(
  store: T,
  keys: readonly K[],
  selector: (state: SelectorState<T, K>) => V,
): V;
function useStoreState<T extends CoreStore, K extends SelectorStateKey<T>, V>(
  store: StateStore<T>,
  keys: readonly K[],
  selector: (state?: SelectorState<T, K>) => V,
): V;

接收 Ariakit 存储对象(可以是) null 或者说 undefined)并返回当前状态。 如果提供密钥作为第二个参数,则返回该密钥的值。 如果提供了选取函数,则会将状态传给它,并使用它的回取值. 选择者呼叫可以通过他们读取的状态密钥,作为跳过不相关的存储更新的第二个参数. 此列表必须包含选择者读取的每个存储密钥, 或返回的快照可能保持不变 。 空列表意味着存储更新永远不会通知选择者 .

使用此钩的组件会在返回的值变化时重新返回 .

示例

访问整个组合框状态 :

const combobox = Ariakit.useComboboxStore();
const state = Ariakit.useStoreState(combobox);

示例

从组合框状态访问特定值 :

const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, "value");

示例

使用选择器函数访问值 :

const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, (state) => state.value);

示例

只订阅选择器读取的状态密钥 :

const tab = Ariakit.useTabStore();
const selected = Ariakit.useStoreState(
  tab,
  ["selectedId"],
  (state) => state.selectedId === "details",
);

示例

访问商店的状态 : null 或者说 undefined (计: 例如,使用上下文:

const combobox = Ariakit.useComboboxContext();
const value = Ariakit.useStoreState(combobox, "value");

useStoreStateObject

type StateStore<T = CoreStore<any>> = T | null | undefined;

type StateKey<T = CoreStore<any>> = keyof StoreState<T>;

type SelectorStateKey<T> = T extends CoreStore ? StateKey<T> : never;

type SelectorState<T, K extends PropertyKey> = T extends CoreStore
  ? Pick<StoreState<T>, Extract<K, StateKey<T>>>
  : never;

type StoreStateObject<T extends StateStore, S> = Record<
  string,
  StateKey<T> | ((state: S) => any)
>;

type StoreStateObjectResult<
  T extends StateStore,
  S extends StoreState<T> | undefined,
  O extends Record<string, StateKey<T> | AnyFunction>,
> = {
  [K in keyof O]: O[K] extends keyof StoreState<T>
    ? O[K] extends keyof S
      ? S[O[K]]
      : StoreState<T>[O[K]] | undefined
    : O[K] extends AnyFunction
      ? ReturnType<O[K]>
      : never;
};

function useStoreStateObject<
  T extends CoreStore,
  O extends StoreStateObject<T, StoreState<T>>,
>(store: T, object: O): StoreStateObjectResult<T, StoreState<T>, O>;
function useStoreStateObject<
  T extends StateStore,
  O extends StoreStateObject<T, StoreState<T> | undefined>,
>(store: T, object: O): StoreStateObjectResult<T, StoreState<T> | undefined, O>;
function useStoreStateObject<
  T extends CoreStore,
  K extends SelectorStateKey<T>,
  O extends StoreStateObject<T, SelectorState<T, K>>,
>(
  store: T,
  keys: readonly K[],
  object: O,
): StoreStateObjectResult<T, StoreState<T>, O>;
function useStoreStateObject<
  T extends CoreStore,
  K extends SelectorStateKey<T>,
  O extends StoreStateObject<T, SelectorState<T, K> | undefined>,
>(
  store: StateStore<T>,
  keys: readonly K[],
  object: O,
): StoreStateObjectResult<T, StoreState<T> | undefined, O>;

接收 Ariakit 存储对象(可以是) null 或者说 undefined)并返回当前状态。 与 useStoreState,此钩子接收到一个对象,该对象的密钥将映射到存储密钥或选择器函数。 在对象中存储密钥总是被订阅. 当选择器依赖密钥作为第二个参数被传递时,它们必须包含每个选择器读取的每个存储密钥,或者返回的快照可能保持停滞. 空列表意味着只有对象中的直接存储密钥会通知选择者.

示例

读取带有选定依赖关系的直接和衍生值 :

const values = useStoreStateObject(store, ["value"], {
  value: "value",
  valueLength: (state) => state.value.length,
});

useStoreProps

function useStoreProps<
  S extends State,
  P extends Partial<S>,
  K extends keyof S,
  SK extends keyof PickByValue<P, SetState<P[K]>>,
>(store: CoreStore<S>, props: P, key: K, setKey?: SK): void;

将商店与道具同步,包括母店道具.

useStore

function useStore<T extends CoreStore, P>(
  createStore: (props: P) => T,
  props: P,
): readonly [T & { useState: UseState<StoreState<T>> }, () => void];

从核心存储对象创建反应存储并返回一个与存储并更新存储的tuple和函数.

Store

type Store<T extends CoreStore = CoreStore> = T & {
  /**
   * Re-renders the component when the state changes and returns the current
   * state.
   * @deprecated Use
   *   [`useStoreState`](https://ariakit.com/reference/use-store-state) instead.
   */
  useState: UseState<StoreState<T>>;
};