mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
57 lines
2.5 KiB
Plaintext
57 lines
2.5 KiB
Plaintext
---
|
|
title: useStore
|
|
description: Hook to access store state and actions with optional selector-based subscriptions
|
|
---
|
|
|
|
import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
|
|
import Demo from "@/components/docs/demos/Demo.astro";
|
|
import DocsLink from "@/components/docs/DocsLink.astro";
|
|
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
|
import StyleCase from "@/components/docs/StyleCase.astro";
|
|
import StoreAccessDemoReact from "@/components/docs/demos/use-store/react/css/StoreAccess";
|
|
import storeAccessReactTsx from "@/components/docs/demos/use-store/react/css/StoreAccess.tsx?raw";
|
|
import storeAccessReactCss from "@/components/docs/demos/use-store/react/css/StoreAccess.css?raw";
|
|
import SelectorDemoReact from "@/components/docs/demos/use-store/react/css/Selector";
|
|
import selectorReactTsx from "@/components/docs/demos/use-store/react/css/Selector.tsx?raw";
|
|
import selectorReactCss from "@/components/docs/demos/use-store/react/css/Selector.css?raw";
|
|
|
|
`useStore` subscribes to a store instance directly. It has the same two overloads as <DocsLink slug="reference/use-player">`usePlayer`</DocsLink> — without a selector for store access, or with a selector for reactive state. Within a player provider, `usePlayer` is usually simpler since it reads the store from context. Reach for `useStore` when you have a store instance directly or need to derive computed values from the store.
|
|
|
|
## Examples
|
|
|
|
### Store Access
|
|
|
|
Call `useStore(store)` without a selector to get the store instance back for imperative actions. The component does not subscribe to state changes.
|
|
|
|
<FrameworkCase frameworks={["react"]}>
|
|
<StyleCase styles={["css"]}>
|
|
<Demo
|
|
files={[
|
|
{ title: "App.tsx", code: storeAccessReactTsx, lang: "tsx" },
|
|
{ title: "App.css", code: storeAccessReactCss, lang: "css" },
|
|
]}
|
|
>
|
|
<StoreAccessDemoReact client:idle />
|
|
</Demo>
|
|
</StyleCase>
|
|
</FrameworkCase>
|
|
|
|
### Selector Subscription
|
|
|
|
Pass a selector to derive and subscribe to computed values from the store. The component re-renders when the derived value changes, using shallow equality by default.
|
|
|
|
<FrameworkCase frameworks={["react"]}>
|
|
<StyleCase styles={["css"]}>
|
|
<Demo
|
|
files={[
|
|
{ title: "App.tsx", code: selectorReactTsx, lang: "tsx" },
|
|
{ title: "App.css", code: selectorReactCss, lang: "css" },
|
|
]}
|
|
>
|
|
<SelectorDemoReact client:idle />
|
|
</Demo>
|
|
</StyleCase>
|
|
</FrameworkCase>
|
|
|
|
<UtilReference util="useStore" />
|