Opstore NPM | npm.io

opstore

An immutable operator-based state container for JavaScript.

npm install opstore

Features

Single source of truth. Data is stored in a single, immutable atom.
Composable. Keep sizes small and roll your own store by only bundling the operators you need.
Extensible. Add your own operators and middleware.
Observable. Subscribe to partial and/or every state change.
Message-driven. Every operation is dispatched internally as a message, which enables such things as logging and event sourcing by way of middleware.
Typed. Written in TypeScript.

Motivation

opstore was built to make it easier to build “vanilla” web apps. Being able to listen to state changes in certain part of the state tree, makes it possible to create tiny render cycles that are simple to reason about and perform well.

This project is based on ideas from Redux, Redis, Firebase and Yr’s source code.

Usage

Out of the box

import {createStore} from 'opstore'

const store = createStore({count: 0})
const countRef = store.ref('count')

countRef.subscribe(count => console.log(count))

console.log(countRef.get()) // 0

countRef.incr() // 1
countRef.incr() // 2
countRef.decr() // 1
countRef.decr() // 0

Composing a store

import {createFactory, lpush, lremi} from 'opstore'

const createStore = createFactory({lpush, lremi})

const store = createStore({
  todos: []
})

const todosRef = store.ref('todos')

todosRef.subscribe(todos => console.log(JSON.stringify(todos)))

console.log(JSON.stringify(store.get())) // []
todosRef.lpush({title: 'A'}) // [{"title":"A"}]
todosRef.lpush({title: 'B'}) // [{"title":"A"},{"title":"B"}]
todosRef.lremi(0) // [{"title":"B"}]