cache()

In Joystick, the cache() method helps you to create a client-side, global state cache for your app (think like Redux but specific to Joystick). A cache can be initialized with a default value and returns an instance with methods for modifying the cache and listening for changes.

Example Usage

Inside of our App layout component, we import cache from @joystick.js/ui and initialize our global state at window.player_state.

To initialize our cache, we call cache('<cache_name>', <default_state>), here within the lifecycle.on_mount method of our App layout component:

import joystick, { cache } from '@joystick.js/ui';
import Player from '../../components/player/index.js';

const App = joystick.component({
  state: {
    player: null,
  },
  lifecycle: {
    on_mount: (instance = {}) => {
      window.player_state = cache('player', {});
    },  
  },
  render: ({ component, props }) => {
    return `
      <div class="app">
        ${component(props.page, props)}
        ${component(Player, { state: state?.player })}
      </div>
    `;
  },
});

export default App;

Here, we initialize our cache with an empty object as we do not have any default values to set (if you did, you'd pass them as the second argument as shown above).

API

cache(cache_name: string, default_value: any) => object

cache_name string required

The name of the cache.

default_value string

The default value for the cache. Accepts any data type.