Alveron NPM | npm.io

Alveron

Disclaimer: Alveron was formerly published as react-woodworm. It was renamed in order to replace the previous alveron package. The old react-woodworm version 4.0 is now published as alveron version 2.0. Sorry for the inconvenience.

Alveron 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.
From version 3.0.0, it also provides a useAlveron hook.

It can handle both local component state as well as global state.

Support Me

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

Installation

# yarn
yarn add alveron

# npm
npm i --save alveron

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

Documentation

We recommend starting with Why and How to understand why Alveron exists and how it works.

Examples

The Gist

Want to use Alveron with hooks already? Check out Using Hooks.

import React from 'react'
import { createStore } from 'alveron'

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 { Wrapper } = createStore({
  model,
  actions,
  effects
})

const Counter = () => (
  <Wrapper>
    {({ 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>
    )}
  </Wrapper>
)