usePageState

This hook provides access to the Zustand-based page-level state. Each page in the app has its own isolated state store containing block data, current action, metadata, and any custom state set by blocks. Use a selector function to subscribe to specific slices of state for optimal performance.

Import

import { usePageState } from '@appmaker-xyz/core';

Basic Usage

// Read specific state values using selectors
const blockData = usePageState((state) => state.blockData);
const currentAction = usePageState((state) => state.currentAction);
const isLoading = usePageState((state) => state.blockDataSourceLoading);

// Access custom state set by other blocks
const searchQuery = usePageState((state) => state.searchQuery);

// Get the setter to update page state
const setPageState = usePageState((state) => state.setPageState);
setPageState({ myCustomValue: 'hello' });

// Set a single state variable
const setPageStateVar = usePageState((state) => state.setPageStateVar);
setPageStateVar('searchQuery', 'red shoes');

Parameters

Parameter	Type	Description
selector	Function	A selector function that receives the full page state and returns the slice you need. E.g., (state) => state.blockData.

Available State Properties

Property	Type	Description
blockData	Object	Data passed to the page's blocks from the data source.
blockDataSourceLoading	boolean	Whether the block data source is currently loading.
blockDataError	any	Error from block data source fetch, if any.
currentAction	Object	The navigation action that opened this page (contains params).
pageId	string	The page identifier.
metaData	Object	Page metadata.
dataSourceResponse	Object	Raw data source responses keyed by name.

Available Actions (via selector)

Action	Type	Description
setPageState	Function	Merges an object into page state. Signature: setPageState({ key: value }).
setPageStateVar	Function	Sets a single state variable. Signature: setPageStateVar(name, value).
setBlockData	Function	Replaces the block data and sets loading to false.
updateBlockData	Function	Updates a single key in block data. Signature: updateBlockData(key, value).
setCurrentAction	Function	Updates the current action.
setMetaData	Function	Updates the page metadata.
setBlockDataSourceLoading	Function	Sets the loading state.
setBlockDataSourceResponse	Function	Stores a data source response. Signature: setBlockDataSourceResponse(name, response).