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.
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:
This example shows a React component:
// components/user.jsx
import { useStore } from '@nanostores/react';
import { $loggedIn } from '../stores/user.js';
export const User = () => {
const loggedIn = useStore($loggedIn);
return <p>{loggedIn ? 'Welcome!' : 'Please log in'}</p>;
};
This is the same component in Lit:
// components/user.js
import { StoreController } from '@nanostores/lit';
import { $loggedIn } from '../stores/user.js';
class User extends LitElement {
loggedInController = new StoreController(this, $loggedIn);
render() {
return html`<p>
${this.loggedInController.value ? 'Welcome!' : 'Please log in'}
</p>`;
}
}
customElements.define('a-user', User);
By using the included helper you can make your reactive state sync between the different parts of a Podium application.
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', []);
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' });
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';
export const $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]']);