city-state.js

Observable and encapsulated state management

Installation

npm install --save city-state

Usage

<Subscribe> component

Subscribes to an Observable (like a subscribable) and updates children whenever there is a new value.

//
// Model
//

import { subscribable } from 'city-state'

@subscribable
class Counter {
  constructor() {
    this.count = 0
  }

  increment() {
    this.count += 1
  }

  decrement() {
    this.count -= 1
  }
}

const counter = new Counter()

//
// View
//

import React from 'react'
import { Subscribe } from 'city-state'

export default function CounterView({ counter }) {
  <Subscribe to={[counter]}>
    {(counter) => (
      <span>Counter: {counter.count}</span>
    )}
  </Subscribe>
}

Redux offers an Observable API that could be used with Subscribe.

function CounterView({ reduxStore }) {
  <Subscribe to=[reduxStore]>
    {currentState => (
      <span>Counter: {currentState.count}</span>
    )}
  </Subscribe>
}

For a working example, see the code on /examples

@subscribable

Adds a minimal Observable interface to a class. Whenever a property is changed on the subscribable object, all subscribers are notified.

Interface:

• this.subscribe(): Observable subscribe method
• this[$$obseravble]: Symbol.Observable interop point

import { subscribable } from 'city-state';

@subscribable
class Counter {
  constructor() {
    this.count = 0
  }

  increment() {
    this.count += 1
  }

  decrement() {
    this.count -= 1
  }
}

const counter = new Counter()
counter.subscribe(() => {
  console.log(counter.count)
}) // => 0

counter.increment() // => 1
counter.increment() // => 2
counter.decrement() // => 1

devtool()

Plot current state of a subscribable object (or any Observable) in Redux devtools.

@subscribable
class Foo {}

const foo = new Foo()

devtool(foo, { name: 'foo' })

Related

• city-state-preact

Sponsor

If you found this library useful and are willing to donate, transfer some bitcoins to 1BqqKiZA8Tq43CdukdBEwCdDD42jxuX9UY.

Credits

• Icon by Praveen Patchu from The Noun Project
• Redux
• Unstated

caiogondim.com  ·  GitHub @caiogondim  ·  Twitter @caio_gondim