@podium/store

This is a client-side library that provides a reactive data store using nanostores on top of @podium/browser's MessageBus. It includes some ready-made stores and helpers for you to make reactive stores for your own events.

By using reactive state backed by MessageBus you can seamlessly share state between different parts of a Podium application. If a podlet changes the value of shared state, all other podlets using that value can update.

Usage

To install:

npm install @podium/store

Use the reactive store to do minimal updates of your UI when state changes. Nanostores supports multiple view frameworks:

• React and Preact
• Lit
• Vue
• Vanilla JS

This example shows a React component:

// components/user.jsximport{useStore}from'@nanostores/react';import{$loggedIn}from'../stores/user.js';exportconstUser=()=>{constloggedIn=useStore($loggedIn);return<p>{loggedIn ? 'Welcome!' : 'Please log in'}</p>;};

This is the same component in Lit:

// components/user.jsimport{StoreController}from'@nanostores/lit';import{$loggedIn}from'../stores/user.js';classUserextendsLitElement{loggedInController=newStoreController(this,$loggedIn);render(){returnhtml`<p>${this.loggedInController.value ? 'Welcome!' : 'Please log in'}</p>`;}}customElements.define('a-user',User);

Create your own reactive state

By using the included helper you can make your reactive state sync between the different parts of a Podium application.

API

In addition to the APIs listed here, @podium/store exports all APIs available in nanostores.

atom(channel, topic, initialValue)

Create your own atom that syncs between parts of a Podium application using the MessageBus.

This method requires the following arguments:

option	type	details
channel	string	Name of the channel
topic	string	Name of the topic
payload	object	The initial value. Replaced if peek(channel, topic) returns a value.

import{atom}from'@podium/store';const$reminders=atom('reminders','list',[]);

map(channel, topic, initialValue)

Create your own map that syncs between parts of a Podium application using the MessageBus.

This method requires the following arguments:

option	type	details
channel	string	Name of the channel
topic	string	Name of the topic
payload	object	The initial value. Replaced if peek(channel, topic) returns a value.

import{map}from'@podium/store';const$user=map('user','profile',{displayName: 'foobar'});

deepMap(channel, topic, initialValue)

Create your own deepMap that syncs between parts of a Podium application using the MessageBus.

This method requires the following arguments:

option	type	details
channel	string	Name of the channel
topic	string	Name of the topic
payload	object	The initial value. Replaced if peek(channel, topic) returns a value.

import{deepMap,listenKeys}from'@podium/store';exportconst$profile=deepMap('user','details',{hobbies: [{name: 'woodworking',friends: [{id: 123,name: 'Ron Swanson'}],},],skills: [['Carpentry','Sanding'],['Varnishing']],});listenKeys($profile,['hobbies[0].friends[0].name','skills[0][0]']);