createPubSubStore

A state management hook implemented on Publish-Subscribe pattern. It allows components to subscribe to state changes and receive updates whenever the state is modified, providing a scalable and decoupled state management solution.

N.B.: to work properly, objects like Set, Map, Date or more generally objects without Symbol.iterator must be treated as immutable.

Demo

INFO

In this example it has been used createPubSubStore hook to create a global store that contains a user object and a spinner value to handle logic of two components. The updateStore and usePubSubStore function returned from createPubSubStore are exported to be used from other components:

Component 1 uses usePubSubStore hook subscribing user object from store to edit user object properties by three input tags.
Component 2 uses:
- usePubSubStore hook subscribing only name property of user object from store to edit name value.
- updateStore hook to update spinner property from store when button handle spinner is clicked.

Loading demo…

Show source code

tsx

import { memo } from "react";
import { createPubSubStore } from "../../../..";

//File store.ts
const store = createPubSubStore(
	{
		user: {
			id: 0,
			name: "",
			eta: 0
		},
		spinner: false
	},
	{
		toggleSpinner: (store, val: boolean) => {
			store.spinner = val;
		}
	}
);
export const { usePubSubStore, mutateStore } = store;

//import {usePubSubStore} from '../store.ts';
const Comp1 = () => {
	const [state, setState] = usePubSubStore(store => store.user);

	return <div>
		<label htmlFor="id">ID:</label>
		<input type="number" name="id" value={state.id} onChange={(e) => setState(store => ({ ...store, id: Number(e.target.value) }))} />
		<label htmlFor="name">NAME:</label>
		<input type="text" name="name" value={state.name} onChange={(e) => setState(store => ({ ...store, name: e.target.value }))} />
		<label htmlFor="eta">ETA:</label>
		<input type="number" name="eta" value={state.eta} onChange={(e) => setState(store => ({ ...store, eta: Number(e.target.value) }))} />
	</div>
}

//import {usePubSubStore} from '../store.ts';
const Comp2 = memo(() => {
	const [state, setState, , mutators] = usePubSubStore(store => store.user.name);

	return <div>
		<label htmlFor="name">NAME:</label>
		<input type="text" name="name" value={state} onChange={(e) => setState(e.target.value)} />
		<button onClick={async () => {
			mutators.toggleSpinner(true);
			await new Promise(res => setTimeout(res, 4000));
			mutators.toggleSpinner(false);
		}}>Enable Spinner</button>
	</div>
})

//import {usePubSubStore} from '../store.ts';
export const CreatePubSubStore = () => {
	const [spinner] = usePubSubStore(store => store.spinner);
	return <div style={{ display: "grid", gridTemplateRows: "auto auto", gap: 20, justifyContent: "center" }}>
		<fieldset style={{padding: 20}}>
			<legend>Component 2</legend>
			<Comp2 />
		</fieldset>
		{
			spinner
				? <p>Loading...</p>
				: <fieldset style={{padding: 20}}>
					<legend>Component 1</legend>
					<Comp1 />
				</fieldset>
		}
	</div>
}

Types

`PubSubMutatorsFn`

@template T - The store object type.

The map of mutator functions accepted by createPubSubStore. Each mutator receives the current store as its first argument, followed by any number of additional custom arguments.

export type PubSubMutatorsFn<T extends object> = Record<string, (store: T, ...args: any[]) => void>;

`PubSubMutators`

@template E - The original mutators function map type.

The derived mutators object exposed on the store instance. Each key mirrors a key of the original mutatorsFn map, but the first store argument is stripped — callers only pass the additional custom arguments.

export type PubSubMutators<E extends PubSubMutatorsFn<any>> = Record<keyof E, (...args: ExtractTail<Parameters<E[keyof E]>>) => void>;