National Palace Museum

    storeon-connect
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.0 • Public • Published

    storeon-connect

    build npm version minzip

    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

    License

    MIT

    Install

    npm i storeon-connect

    DownloadsWeekly Downloads

    2

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    9.23 kB

    Total Files

    8

    Last publish

    Collaborators

    • shoonia