qsyd v1.0.3

Quit Stroking Your D***

A seriously simple immutable front-end state management solution that avoids all the mental masturbation associated with something like Redux.

The Gist

    const { Node } = require( "qsyd" );
    const axios    = require( "axios" );

    const INITIAL_STATE = [];

    class ImplNode extends Node {

        constructor() {
            super( INITIAL_STATE );
        }        

        async addItem() {

            var item = await axios.get( "http://www.some.api.endpoint" ).then( x => x.data );
            this.dispatch( ( s ) => [ ... s, item ] );

        }
    }

    var impl = new ImplNode();
    impl.subscribe( () => console.log( impl.getState() ) );

The library exports a Node class. An instance of which is analagous to a Redux store. It holds some immutable state (accessible via the getState method) which can be updated by dispatching or performing logical "actions".

This is where the similarities end. Instead of having to break up these logical actions into constituent: reducers, actions, action types and thunks, we can instead simply implement them as methods on a sub-class of Node.

To ensure state is not ever directly mutated, changes to the state can be performed by using the dispatch method. This takes a state transforming function that takes us from the old state to the new (similar to a reducer).

State changes (via dispatch) can be subscribed to using the subscribe method. This returns a nullary unsubscribe function that can be called at a later time.

There is no requirement to only have a single node. Multiple nodes can be used, with each controlling a different "domain" of state.