crustate

0.9.1 • Public • Published

Crustate

A message-based modular state-management library for JavaScript applications

npm bundle size Dependencies Build Status Codecov License npm Greenkeeper badge

This library is based on the principles of message passing found in languages like Elm and Elixir/Erlang. The purpose is to be able to build modular state with controlled side-effects through messaging.

Model

type Model<T, I, M: Message> = {
  id: string,
  init: (init: I) => Update<T>,
  update: (state: T, msg: M | UnknownMessage) => ?Update<T> | UpdateNoop,
};

A model represents how a state is initialized and updated, as well as which messages it will respond to at any given moment.

Message

type Message = { +tag: string };

A message is just plain data, a JavaScript object, with a mandatory property named tag. The tag is supposed to work as a discriminator, informing the receivers of what type of message it is, what possible data it contains, and what it means.

Note that these messages are to be completely serializable by JSON.stringify to facilitate resumable sever-rendering, logging, history playback, inspection, and other features.

const ADD = "add";

let msg = {
  tag: ADD,
  value: 2,
};

Init

type ModelInit<T, I> = (init: I) => Update<T>;

The initial data of the state, accepts an optional init-parameter.

import { updateData } from "crustate";

function init() {
  return updateData(0);
}

Update

type ModelUpdate<T, M: Message> = (state: T, msg: M) => ?Update<T>;

Conceptually update is responsible for receiving messages, deciding on if the state should respond to them, interpreting them, updating the state, and send new messages in case other components need to be informed or additional data requested.

This is very similar to Redux's Reducer concept with the main difference being that the update-function can send new messages as well as not return anything to indicate that the state is not interested in the message.

function update(state, message) {
  switch (message.tag) {
    case ADD:
      return updateData(state + message.value);
  }
}

When a message produces an update-value from a state update it will be consumed by that state and no longer propagate upwards in the tree, a null/undefined return means that the message should keep propagating upwards.

Messages sent from the update function are propagated upwards in the state-hierarchy and can be acted upon in supervising states.

Package Sidebar

Install

npm i crustate

Weekly Downloads

26

Version

0.9.1

License

MIT

Unpacked Size

239 kB

Total Files

52

Last publish

Collaborators

  • poggen
  • m4rw3r
  • lokecarlsson