Using Page State (Advanced)

Page State is in-memory storage that’s available during a page session. There are three Page State namespaces to isolate information:

  • Private β€” accessible only for bricks attached to the starter brick

  • Mod β€” accessible to all bricks in the mod

  • Public β€” accessible to all bricks

There are two bricks to write/read directly from Page State:

Additionally, there are other bricks that can connect to the Page State

  • Trigger Starter Brick: can listen for changes to Page State

  • Sidebar Starter Brick: can re-render on changes to Page State

  • Custom Form: can be synchronized to Mod Variables/Page State

  • Display Temporary Information: can re-render on changes to Page State

  • With Async Async Page State: runs one or more bricks asynchronously and keeps track of the result in a Mod Variable

Getting Page State

The β€œGet Shared Page State” brick retrieves all data for the chosen namespace and assigns it to a Local Variable.

Using β€œGet Shared Page State” can be useful to take a snapshot of multiple Mod Variables at a single point in time.

Setting Page State

The β€œSet Shared Page State” brick provides full control over how to update Page State, including Mod Variables stored in the mod namespace.

Merge Strategy

The Merge Strategy input of the β€œSet shared page state” brick controls how the values provided impact existing values:

  • Shallow (default): properties provided overwrite existing properties. Other properties are preserved

  • Replace: replace the page state with the new values

  • Deep: merge properties, including nested objects. For arrays, items are merged pairwise. If two values are different types, the value is replaced

Example: Replace State

Before:

hasRun: false
message: "Some text"

Update

After

# The message field is removed, because the whole state is replaced
hasRun: true

Example: Shallow Merge

Before

hasRun: false
message: "Some text"

Update

After

hasRun: true
# The `message` key is not modified
message: "Some text"

Example: Deep Merge

In β€œdeep” merge mode, arrays items are merged together pair-wise. (They are not appended)

Before: State

hasRun: false
exampleObject:
  key1: "Text value"  

Before: @data

exampleObject:
  key2: "Key from @data object"

Update

After

hasRun: false
exampleObject:
  key1: "Text value"
  # key2 is deep merged into exampleObject
  key2: "Key from @data object"

Last updated