state-prism v0.0.5

:sparkles: Features

state-prism lets you subscribe to state changes. It is thin layer on top of on-change.

I use it mainly for games. Whenever the game's state is updated, I trigger a callback to re render UI components that are dependent on that state.

:wrench: Example usage

Let's say my state looks like this:

state.js

import { init } from 'state-prism'

const state = {
  player: {
    mana: 10,
  },
}

export default init(state)

Somewhere in my code the player spends 5 mana:

battle.js

import state from './state'

state.player.mana -= 5

Then I can re render my UI component that renders the mana.

ui.js

import { subscribe } from 'state-prism'

subscribe('player.mana', (mana) => {
  renderMana(mana)
})

Using this pattern, the state logic and the render functions can be kept separate.

:package: Install

npm

npm install state-prism

yarn

yarn add state-prism

:newspaper: API

Basic

init - Initialize state-prism with your state object. Enables listening to changes.

subscribe - Attach a callback to a path in your state. The callback will be called whenever the state changes.

Advanced

target - Access the original state object.

Useful for:

• Logging
• Destructuring

getSubscriberCount - Get the total subscribers count.

:book: Recipes

Dynamically activate listeners

If you are creating an advanced application you probably don't want all listeners to be active at the same time.

For example, if you only want to render mana during battle, you can do this:

import * as prism from 'state-prism'

prism.subscribe(
  'player.mana', 
  (mana) => {
    renderMana(mana)
  }, 
  { enabled: () => state.scene === 'battle' }
)

:computer: Develop

Commands

Workflow

1. Make changes
2. Update tests
3. yarn go and verify that your changes work.
4. Commit to master or make PR

Release

yarn release