DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
EscClose
  • 1.8.0

  • Day

    Night

    Preview

    Switch mode
  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Get started

OverviewReactivityData FetchingGlobal Stores

Primitives

Creating SignalsCreating QueriesCreating MutationsComputing Signal ValuesCreating EffectsContextual Signal StoresBatch UpdatesCleanup EffectsUntrack Signals

Hooks

Using QueriesUsing MutationsReading Primitive SignalsUsing SignalsUsing Store Instances

Components

Reactive Text

Global Stores

Learn the fundamentals of creating signal-based stores in React Signals.

  • source
View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

Introduction

As your app grows you may find the need for a single-source of truth for managing signals in a scalable way. In Cerberus Signals you can achieve this by creating a store.

A store is simply a function that contains mutliple signals and actions which manage those signals. There are no restrictions for what a store is.

A store can use any primitive API in it. This means the potential is limitless for whatever you wish to achieve in a high-performant way that doesn't involve React controlling the scenario.

Global Stores

To create a global store, simply create a function that returns an Object. It can be anything and use any Cerberus Signals Primitive API within it.

Loading example...

Contextual Stores

To create a store that uses unique instances on a React app/component level, use the createStoreContext API.

Loading example...

React rules

Depending on the complexity and use case of your store, React may "get in the way" of your signal management when using stores within a component.

If you intend on using a store within a component you must follow one of the two designs to ensure React doesn't corrupt your hard work via the render cycles:

Pure Global Stores

If you have a store that can be called on the global scope (outside of a component), then you are good to go. Utilize useRead for iteration and ReactiveText for reading.

Loading example...

Local Component Store

If a store must live within a component, then you will need to take precautions to ensure React does not corrupt your store state via wrapping your store in useStore.

Loading example...

Reactivity

Since stores are essentially a primitive that contain primitives, you will need to utilize the ReactiveText or useRead APIs in order to obtain the reactive values within the scope of any component.

When calling a store within a component and reading a value with useRead you must wrap your store in useStore to ensure React does not corrupt the signal state.

On this page

  • Introduction
  • Global Stores
  • Contextual Stores
  • React rules
    • Pure Global Stores
    • Local Component Store
  • Reactivity
Edit this page on Github
0:0:0

Selected:

    0

    Multiplied: 0

    0