React-woodworm NPM

react-woodworm

Woodworm is an Elm-inspired state management library for React support asynchronous effects by default.It uses React's new context API and is super lightweight at only 1kb gzipped.

Support Me

If you're using Robin Frischmann's packages, please consider supporting his Open Source Work on Patreon.

Installation

# yarn
yarn add react-woodworm

# npm
npm i --save react-woodworm

Caution: It requires ^react@16.3.0 to be present.

Documentation

The Gist

import React from 'react'
import { createStore } from 'react-woodworm'

const model = 0
const actions = {
  increment: prevState => prevState + 1,
  decrement: prevState => prevState - 1,
  reset: () => model
}

// It also supports async side effects
// this is useful if you e.g. do API calls
const effects = {
  resetAsync: actions => setTimeout(
    actions.reset,
    1000
  )
}

const { Provider, Consumer } = createStore({
  model,
  actions,
  effects
})

const Counter = () => (
  <Provider>
    <Consumer>
      {({ state, actions, effects }) => (
        <div>
          Count: {state}
          <button onClick={actions.increment}>+</button>
          <button onClick={actions.decrement}>-</button>
          <button onClick={effects.resetAsync}>Reset after 1 second</button>
        </div>
      )}
    </Consumer>
  </Provider>
)