Frontend Store

Suggest Edits

🚧

Warning

This document is deprecated. Read the new one here.

Overview

The frontend-store package is used for managing global store state.

The main difference between React's useState and Shogun Frontend's useStore hook is that passing an object to the setter function will merge those changes with the previous store values.

Import

frontend-store is already pre-installed on every Shogun Frontend store. To import:

import useStore from 'frontend-store'

Usage

Below is an example on how to set a global state using frontend-store:

import React from 'react'
import useStore from 'frontend-store'

const MyComponent = () => {
  const [store, setStore] = useStore()

  console.log(store) // initial state is `{}`

  return (
    <div>
      <button onClick={() => setStore({ foo: 'bar' })}>
        Update store
      </button>
    <div>
  )
}

export default MyComponent

To access the global state in a different component/section:

import React from 'react'
import useStore from 'frontend-store'

const AnotherComponent = () => {
  const [store] = useStore()

  console.log(store) // state is `{ foo: 'bar' }`

  return (
    <p>
      The global state for 'foo' is: {store.foo}
    <p>
  )
}

export default AnotherComponent

Updated 8 months ago