Storeon-connect NPM

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