model.store.ts

A store file is the client-side state and action layer for a module. Pages and UI components read state from the store and call store actions instead of coordinating fetch calls directly.

Stores sit between UI and generated fetch/sig clients. Service and document files keep business rules; store files handle UI state, form state, list state, toast messages, and client navigation around those calls.

Store Class Structure

Define a store with store(sig.model, stateFactory). The second argument is a factory, so default state is recreated safely for each runtime instance.

ticket.store.ts

service-only store

Extending Generated Stores

When an app extends a generated or library domain, pass the generated stores after local state. The inherited state, actions, and metadata are merged first, then the app adds its own state and actions.

user.store.ts

Writable And Derived State

Most stores only need plain writable state. The state builder also supports persist and session values. A third store() argument can define derived state such as URL search params or computed values.

store state builders

plain

Use normal values for UI state that can reset with the store.

persist

Use for values that should survive browser reloads.

session

Use for values that should last only during the current browser session.

search / computed

Use for URL-backed state or values derived from writable state.

State Interaction

Inside a store action, use get for optional reads, pick for required state, and set for updates. pick is useful when the next line cannot work without that state.

method	Description	Example
get()	Get the current snapshot of the store state.
set(state)	Update store state. It merges shallowly.
pick(...keys)	Select required state values. It throws immediately if any requested key is null or undefined.

get()

Get the current snapshot of the store state.

set(state)

Update store state. It merges shallowly.

pick(...keys)

Select required state values. It throws immediately if any requested key is null or undefined.

pick throws if the requested value is null or undefined. Use get when null is a valid branch you want to handle manually.

Standard Model API

A store bound to sig.model receives generated model state and generated CRUD/form actions. These helpers cover common create, update, remove, view, edit, submit, and cache flows.

Base State

field	Description
st.<model>: Full \| null	The cached full model instance.
st.<model>Loading: string \| boolean	Loading status for the model instance.
st.<model>Form: Default	Form state for create or update flows.
st.<model>FormLoading: string \| boolean	Loading status for form submission.
st.<model>Submit: Submit	Latest submit state.
st.<model>ViewAt: Date	Time when the detailed view was opened.
st.<model>Modal: string \| null	Modal key associated with this model.

st.<model>: Full | null

The cached full model instance.

st.<model>Loading: string | boolean

Loading status for the model instance.

st.<model>Form: Default

Form state for create or update flows.

st.<model>FormLoading: string | boolean

Loading status for form submission.

Slice Auto-Generated Features

Slice state and actions are generated from slices declared in model.signal.ts. Use them for list pages, pagination, sorting, selection, and insight state.

ticket.signal.ts

Generated Slice State

field	Description
st.default<Class>: Default	Default value for the slice.
st.<slice>List: DataList<Light>	List loaded by init or refresh.
st.<slice>ListLoading: boolean	Loading status of the list.
st.<slice>InitList: DataList<Light>	Initial list snapshot.
st.<slice>InitAt: Date	Time when the list was initialized.
st.<slice>Selection: DataList<Light>	Selected items in the list.
st.<slice>Insight: Insight	Insight data for the list.
st.lastPageOf<Slice>: number	Last accessed page number.
st.pageOf<Slice>: number	Current page number.
st.limitOf<Slice>: number	Items per page.
st.queryArgsOf<Slice>: QueryArgs	Current query arguments.
st.sortOf<Slice>: Sort	Current sort setting.

Usage Patterns

Use this.get, this.pick, this.set, generated fetch clients, and generated setters inside store actions. In React components, read with st.use and call actions with st.do.

Inside store

Inside component

Auto-Generated Setters

setter examples

Other Stores With RootStore

Store instances are merged into one app-level RootStore type. Use RootStore casting only for rare cross-store coordination, because broad cross-store coupling makes actions harder to reason about.

user.store.ts

Practical Rules

Keep UI orchestration in store: fetch calls, loading state, toast messages, modal state, and navigation.

Keep pure business rules in constants, documents, services, or signals instead of store actions.

Use pick for required state and get when null is a valid branch.

Use generated fetch clients inside store actions and generated setters like this.setTicket after successful mutations.

Extend generated or library stores with ...model.stores before adding app-specific state and actions.

Use RootStore casting sparingly for cross-store coordination.

model.store.ts

Store Class Structure

Extending Generated Stores

Writable And Derived State

State Interaction

Standard Model API

Slice Auto-Generated Features

Usage Patterns

Other Stores With RootStore

Practical Rules

Structure

method

Description

Example

get()

Get the current snapshot of the store state.

set(state)

Update store state. It merges shallowly.

pick(...keys)

Select required state values. It throws immediately if any requested key is null or undefined.

field

Description

st.<model>: Full | null

The cached full model instance.

st.<model>Loading: string | boolean

Loading status for the model instance.

st.<model>Form: Default

Form state for create or update flows.

st.<model>FormLoading: string | boolean

Loading status for form submission.

st.<model>Submit: Submit

Latest submit state.

st.<model>ViewAt: Date

Time when the detailed view was opened.

st.<model>Modal: string | null

Modal key associated with this model.

field

Description

st.default<Class>: Default

Default value for the slice.

st.<slice>List: DataList<Light>

List loaded by init or refresh.

st.<slice>ListLoading: boolean

Loading status of the list.

st.<slice>InitList: DataList<Light>

Initial list snapshot.

st.<slice>InitAt: Date

Time when the list was initialized.

st.<slice>Selection: DataList<Light>

Selected items in the list.

st.<slice>Insight: Insight

Insight data for the list.

st.lastPageOf<Slice>: number

Last accessed page number.

st.pageOf<Slice>: number

Current page number.

st.limitOf<Slice>: number

Items per page.

st.queryArgsOf<Slice>: QueryArgs

Current query arguments.

st.sortOf<Slice>: Sort

Current sort setting.

method	Description
create<Class>InForm(options?)	Create a document using form state.
update<Class>InForm(options?)	Update a document using form state.
create<Class>(data, options?)	Create a new document with data.
update<Class>(id, data, options?)	Update an existing document.
remove<Class>(id, options?)	Remove a document.
check<Class>Submitable(disabled?)	Check whether the form can be submitted.
submit<Class>(options?)	Submit the form for create or update.
new<Class>(partial?, options?)	Initialize form state for creation.
edit<Class>(model, options?)	Initialize form state for editing.
merge<Class>(model, data, options?)	Merge data into an existing cached document.
view<Class>(model, options?)	Open detailed view state.
set<Class>(...models)	Manually set model cache.
reset<Class>(model?)	Reset model state.

method	Description
init<Slice>(...args)	Initialize list with query args.
refresh<Slice>(initForm?)	Reload list with strict consistency.
select<Slice>(model, options?)	Update selection state.
setPageOf<Slice>(page, options?)	Change page and reload.
addPageOf<Slice>(page, options?)	Load next page and append.
setLimitOf<Slice>(limit, options?)	Change list limit and reload.
setQueryArgsOf<Slice>(...args)	Change query arguments and reload.
setSortOf<Slice>(sort, options?)	Change sort and reload.