delux

Delux

Beautiful, light and simple state manager inspired by Redux

import Store from 'delux';

let store = new Store ();

store.tasks = new Store.Collection ({tasks: []});

store.tasks.on('addTask', (tasks, action) => tasks.concat({
    name: action.payload,
    completed: false
}));

store.observe('tasks', (state) => console.log(state.tasks));

store.dispatch({
    type: 'addTask',
    payload: 'Try Delux'
});

Motivation

• In Flux there's a design flaw: it's hard to manage several stores.
• So came Redux with one store.
• But: Redux lacks a defined API

Features

• Immutable
• Promise Based
• Extendible classes
• Flux Standard Actions
• Ordered middlewares
• No switches or combinations required

API Reference

Store

The Store holds the whole application state and it's mutation logic.

Create a Store

let store = new Store();

Description

Stores are objects whose prototype has methods to mutate there state. The Store's state is hold in Collections assigned to it.

Store instances

Properties

Store.prototype.state

Object with mutations of the collections' states.

Methods

Store.prototype.dispatch()

Dispatches a Flux Standard Action on the state.

store.dispatch({
    type: <string | symbol>,
    payload: <object>
    error: <boolean>,
    meta: <any>
});

Returns

A promise which resolves to the the mutated store state.

Store.prototype.observe()

Adds an observer for mutations in the store's collections

store.observe(['collectionName'], (state) => {

});

Parameters

• names | name - array of collection names or a single name to observe for state mutation
• observer - a function that with a given state mutation receives the name of the changed collection and it's new state. The arguments to the function are as follows:

Name	Supplied Value
state	Store.prototype.state alias

Store.prototype.use()

Adds a middlware to the action resolution process

store.use(middleware|type|{type: middleware}, <middleware>);

Parameters

• middlware - a function that mutates a given action. If it returns a Promise the store will wait for the promise to complete before passing it to the next middleware and the reducers.

• type - action type to apply middleware on.

Store.prototype.queue()

Adds a function to the store's execute queue

store.queue(() => callback());

Store.prototype.state.get()

Get specific collection's state from the store's state

let partialState = store.state.get(collectionNames);

Parameters

Collection

Collections holds a sub-state (similar to Flux Stores) and it's mutation logic

Assign a Collection

store.collectionName = new Collection (init);

Parameters

• init - The initial state of the collection

Collection instances

Properties

Collection.prototype.state

Reflects the collections's state

Collection.prototype.reducers

Reflects the collections's reducers

Collection.prototype.observers

Reflects the collections's observers

Methods

Collection.prototype.on()

Attach a reducer to received actions (Node style)

store.collectionName.on(['actionType'], (state, action) => {

});

Parameters

• types | type - array of action types or a single type to apply the reducer on
• reducer - a function that with a given action mutates the collection state and returns the new state. The arguments to the function are as follows:

Name	Supplied Value
state	The collection state
action	The dispatched action