TanStack Store

TanStack Store is an immutable, reactive data store designed to power the core of the TanStack ecosystem. It provides fine-grained updates for performant state management and offers flexible primitives for building custom state logic.

Key features include:

• Fine-grained updates: Optimized for high performance by minimizing unnecessary re-renders.
• Framework Agnostic: Works across various frameworks including React, Solid, Vue, Angular, Svelte, Lit, and Octane.
• Lightweight & Standalone: Can be used as a standalone library in any application or as a foundation for building other libraries.

The @tanstack/angular-store package provides Angular-specific integration for TanStack Store, allowing you to use stores, atoms, and selectors within Angular components and services using dependency injection and Signals.

Key capabilities include:

• Injecting stores into the Angular DI container.
• Using injectAtom to create reactive signals for specific pieces of state.
• Using injectSelector to derive state via selectors.
• Creating custom store contexts using createStoreContext.

The Angular Store Context example demonstrates how to integrate TanStack Store with Angular using dependency injection. It specifically showcases the use of:

• Angular InjectionToken providers: Providing the store instance through Angular's DI system.
• injectSelector: A mechanism to select and subscribe to specific parts of the store within an Angular context.
• injectAtom: A mechanism to access and interact with individual atoms within the store via Angular's DI system.

This example showcases how to manage state and logic using TanStack Store within a Svelte application, specifically focusing on:

• useSelector: A hook used to select and subscribe to specific slices of the store state.
• _useStore: An internal or specialized hook for accessing the store instance.
• Module-level Store actions: Defining logic and state mutations at the module level rather than inside components, which helps in organizing complex business logic and keeping components lean.

The @tanstack/solid-store package provides integration for TanStack Store within the SolidJS framework. It allows you to manage state using TanStack's store primitives while leveraging SolidJS's fine-grained reactivity.

Key capabilities include:

• Atom-based state access: Using useAtom to access specific pieces of state.
• Selector-based state access: Using useSelector to subscribe to specific slices of the store, optimizing re-renders.
• Context integration: Using createStoreContext to provide a store instance throughout a SolidJS component tree.

This example demonstrates how to use TanStack Store within an Angular application, specifically focusing on:

• injectSelector: Using selectors to retrieve specific slices of state.
• _injectStore: The mechanism for injecting the store instance into Angular components or services.
• Module-level Store actions: Implementing and using actions defined at the store level to manage state transitions.

This example demonstrates how to manage state in a Preact application using TanStack Store, specifically focusing on:

• useSelector: A hook used to select and subscribe to specific slices of the store state.
• _useStore: An internal or specialized hook for accessing the store instance within components.
• Module-level Store actions: Defining actions at the module level to encapsulate state transitions and logic outside of the component lifecycle.

The Preact Store Context example showcases the following TanStack Store APIs for managing state via context and atoms in a Preact environment:

• createStoreContext: Creates a context object for sharing a store instance.
• useCreateStore: A hook for initializing a store.
• useCreateAtom: A hook for creating atoms (fine-grained state slices).
• useStoreContext: A hook to consume the store from the created context.
• useSelector: A hook to select and subscribe to specific parts of the store state.
• useAtom: A hook to interact with an atom.

This example demonstrates how to manage state in React using TanStack Store, specifically focusing on:

• useSelector: A hook used to select and subscribe to specific slices of the store state.
• _useStore: An internal or low-level hook (prefixed with _) used to access the store instance within the React context.
• Module-level Store actions: A pattern where state mutations are encapsulated in standalone functions (actions) defined at the module level, rather than being defined inside components or directly on the store object. This promotes cleaner separation of concerns and easier testing.

The Svelte Store Hooks example demonstrates the following core TanStack Store capabilities:

• useSelector: A hook used to select and subscribe to specific slices of state.
• store.setState: The method used to update the state of the store.
• Module-level Store: Creating and managing a Store instance at the module level for shared state access.

This example demonstrates the following core TanStack Store capabilities within a Vue environment:

• useSelector: A hook used to select and subscribe to specific slices of the store state.
• store.setState: The method used to update the state of the store.
• Module-level Store: Creating and exporting a store instance at the module level to be shared across components.