Flipstate NPM | npm.io

Flip to any state

React v16.3 Context API solved prop drilling but produced a huge unmanagable state tree. flipstate solves this by decomposing Context.Provider into smaller state. Easily manage state per component, but keep the power of having all the state in a single place.

Getting started

Here is a simple counter application.

import React from 'react'
import {render} from 'react-dom'
import createState from 'flipstate'

const {
  StateProvider,
  GlobalState,
  addState
} = createState()

const CounterState = addState('Counter', {
  count: 0,
  increment({count}, amount) {
    return {
      count: count + amount
    }
  },
  decrement({count}, amount) {
    return {
      count: count - amount
    }
  }
})
const Counter = () =>
  <CounterState>{({count, increment, decrement}) =>
    <>
      <p>count: {count}</p>
      <button onClick={() => increment(1)}>+</button>
      <button onClick={() => decrement(1)}>-</button>
    </>
  }</CounterState>

render(<StateProvider>
  <Counter/>
</StateProvider>, document.getElementById('entry'))

Highlights

added state are just render prop components
StateProvider is the Context API provider and works in the same way. Only state components that are decendents of StateProvider will receive updates (but don't need to be direct children)
modules can export state for others to consume. Think AuthState that updates when user logins.
compose states from multiple components using https://github.com/gnapse/render-props-compose
state is composed of data + actions
actions return an update to merge into the state
actions can be async
read state value directly off state components and call delete to remove itself (make sure it is actually no longer used or else undefined will be rendered)
use dynamic import to code split new data/actions/state/components
supports preact, just import 'flipstate/preact'. Requires https://github.com/valotas/preact-context