Reckon-js NPM | npm.io

Reckon JS

Reckon JS is an event-based, immutable state container for javascript apps. Reckon manages state as Facebook Immutable objects. Reckon provides cursors, views and scoped events so that a single Reckon instance can be used for all state in an application.

TodoMVC Example

Demo

The crux of this ReackonJS+React example is under examples/todomvc-react/js and view the demo application running here

Check out app.js for the starting point of the application, and the react components are in the '.jsx' files. The bundle.js is the compiled version of the code.

This is based on the TodoMVC template

Basic Example

Try it here

import Reckon from 'reckon-js';

let reckon = new Reckon({
    fruits:['apple','pear','banana'],
    veges:['carrot','broccoli','celery']
});

let fruitCursor = reckon.select('fruits');
let fruitJoinView = fruitCursor.addView('Fruit join', fruits => fruits.join());

fruitJoinView.onUpdate(newFruitJoin=>{
    console.log("New fruit join: "+newFruitJoin);
});

fruitCursor.on('ADD_A_FRUIT', name => {
    fruitCursor.update(fruitState => fruitState.push(name));
});

fruitCursor.emit('ADD_A_FRUIT','mandarin');
fruitCursor.emit('ADD_A_FRUIT','grape');

// output:
// New fruit join: apple,pear,banana,mandarin
// New fruit join: apple,pear,banana,mandarin,grape

Installation

To install stable version if you are using npm package manager

npm install reckon-js --save

Guide

The Reckon Object

Create a reckon object with your initial state

let reckon = new Reckon({
    fruits: [
        'apple',
        'pear'
    ],
    veges: [
        'tomato',
        'cucumber'
    ]
});

The state is made immutable with Immutable JS. Get back the state like this

let state = reckon.get();
state.get('fruits').get(0); //returns 'apple'

The reckon object doubles up as a cursor; you can use it like a cursor on the whole tree. See the next section for how cursors work

Cursors

Cursors are used to manipulate a particular part of the state. Let's say we just want to deal with the fruits

let fruitsCursor = reckon.select('fruits');
fruitsCursor.get(); //returns ['apple','pear'] as an ImmutableJS wrapper

You can change the data through immutable updates, like this

fruitsCursor.update(currentState => {
    return currentState.push('mandarin').set(1,'banana');
});
fruitsCursor.get(); //returns ['apple','banana','mandarin'] as immutable

For the full list of immutable opertions refer to the ImmutableJS Documentation.

Reckon Object Cursor

The reckon object doubles up as a cursor on the whole state. For example, these two statements are equivelant

reckon.get()
reckon.select([]).get()

In fact you can treat the reckon object as a root cursor in all respects.

Events

You can fire events on a cursor, and you can listen to events on the cursor.

fruitsCursor.on('ADD_FRUIT_EVENT', (data,fruits) => {
    return fruits.concat(data);
});

fruitsCursor.emit('ADD_FRUIT_EVENT', ['orange','grapefruit']);

If your event listener returns anything, it is used to replace the current cursors state.

Updates

You could use an event listener and emit an event in order to update your state. But sometimes you just want to do an update. Here's a shortcut to simply update the state, under the covers it still fires events to do the update

myCursor.update(state=>{
    return state.remove(3).concat([4,5,6]);
});

You can also listen for updates on the cursor. This will fire when anything in the cursors state changes, regardless of which cursor made the change

myCursor.onUpdate( (newState,oldState) => {
    //do some stuff
});

Anything you return will be ignored though, so you don't end up with an infinite loop.

Filters

If you add a listener to a cursor, by default it listens ONLY to events fired on that cursor. However, what if you want to listen to events higher up the state tree, or lower down on the state tree?

import {filterTypes} from 'reckon-js';
...
let fruitSelect = reckon.select('fruit[0]');

fruitSelect.on('SCOPED_EVENT',()=>{
    //this will be called because we passed the SUPER filter
},filterTypes.SUPER);

reckon.emit('SCOPED_EVENT');

The list of filters are:

CURRENT (default) - listens to events fired on the same cursor, at the same path in the tree
SUB - anything equal to or below on the state tree
SUPER - anything equal to or above on the state tree
ANY - listens to all events
ROOT - events emitted only on the top of the tree
SUB_EXCLUSIVE - listens to events strictly below the current cursor
SUPER_EXCLUSIVE - listens to events strictly above the current cursor
AFFECTED - anything where a change to the state in that cursor could affect the current cursor. i.e. anything above, below or the same as the current cursor

Views

Views are simple functions that you add to a listener to expose a certain view of the data. You can also listen to updates on the view for when the output of the function changes.

let reckon = new Reckon({
    fruit:'apple'
});

let view = reckon.addView('fruit_view',data=>data.get('fruit'));
view.onUpdate(data=>{
    //data (which is returned by the view) will now be 'pear'
});

reckon.update(()=>{
    return {
        fruit:'pear'
    };
});

Undo and redo

You can go forward and backward in states by using reckon.undo() and reckon.redo()

This must be enabled when you create a reckon object in order to set the maximum number of states to remember (note that it only remembers the state changes to save on space). e.g.

let reckon = new Reckon({
    state:'state-1'
},{
    maxHistory:1000 //maximum number of undo's to store
});

reckon.update(state=>'state-2');
reckon.undo();
// State now contains 'state-1'
reckon.redo();
// State now contains 'state-2'

Note that updates are fired on all changes, including undo/redo.