storeon-connect
A tiny connector for observes changes in Storeon
How to use
npm i storeon storeon-connect
#or
yarn add storeon storeon-connect
Example
store.js
import { createStoreon } from 'storeon';
const count = (store) => {
// Initial state
store.on('@init', () => ({ count: 0 }));
// Reducers returns only changed part of the state
store.on('increment', ({ count }) => ({ count: count + 1 }));
};
export const store = createStoreon([count]);
import { storeonConnect } from 'storeon-connect';
import { store } from './store.js';
const { getState, setState, dispatch, connect } = storeonConnect(store);
const output = document.querySelector('#output');
const button = document.querySelector('#button');
// The callback function will be run on setup
// and each time when property "count" would change.
connect('count', ({ count }) => {
output.textContent = `${count}`;
});
button.addEventListener('click', () => {
// Emit event
dispatch('increment');
});
API
storeonConnect
const { getState, setState, dispatch, connect } = storeonConnect(store);
getState
Returns an object that holds the complete state of your app.
const state = getState();
Syntax
function getState(): object
setState
Set partial state. Accepts an object that will assign to the state.
setState({ xyz: 123 });
Syntax
function setState(data: object): void
dispatch
Emits an event with optional data.
dispatch('event/type', { xyz: 123 });
Syntax
function dispatch(event: string, data?: any): void
connect
Connects store state by property keys. It will return the function disconnect from the store.
const disconnect = connect('key', (state) => { });
disconnect();
You can connect for multiple keys, the last argument must be a function.
connect('key1', 'key2', (state) => { });
Runs callback function once.
connect((state) => { });
Syntax
function connect(...args: [...keys: string[], handler: ConnectHandler]): Disconnect
type ConnectHandler = (state: object) => void | Promise<void>
type Disconnect = () => void