Storeon

A tiny event-based Redux-like state manager for React and Preact.

Small. 179 bytes (minified and gzipped). No dependencies. It uses Size Limit to control size.
Fast. It track what state parts was changed and re-render only components based on this state parts.
Immutable. The same Redux reducers, but already with syntax sugar on top.
Modular. API created to move business logic away from React components.

import createStore from 'storeon'

// Initial state, reducers and business logic are packed in independent modules
let increment = store => {
  // Initial state
  store.on('@init', () => ({ count: 0 }))
  // Reducers returns only changed part of the state
  store.on('inc', ({ count }) => ({ count: count + 1 }))
}

export const store = createStore([increment])

import connect from 'storeon/react' // or storeon/preact

const Counter = ({ count, dispatch }) => <>
  {count}
  <button onClick={() => dispatch('inc')} />
</>

// Counter will be re-render only on `state.count` changes
export default connect('count', Counter)

import { StoreContext } from 'storeon/react'

render(
  <StoreContext.Provider value={store}>
    <Counter></Counter>
  </StoreContext.Provider>,
  document.body
)

Usage

Store

The store should be created with createStore() function. It accepts list of the modules.

Each module is just a function, which will accept store and bind their event listeners.

// store/index.js
import createStore from 'storeon'

import projects from './projects'
import users from './users'

export const store = createStore([projects, users])

// store/projects.js

export default store => {
  store.on('@init', () => ({ projects: [] }))

  store.on('projects/add', ({ projects }, project) => {
    return projects.concat([project])
  })
}

The store has 3 methods:

store.get() will return current state. The state is always an object.
store.on(event, callback) will add event listener.
store.dispatch(event, data) will emit event with optional data.

Events

There are three built-in events:

@init will be fired in createStore. The best moment to set an initial state.
@dispatch will be fired on every store.dispatch() call. It receives array with event name and event’s data. Can be useful for debugging.
@changed will be fired every when event listeners changed the state. It receives object with state changes.

To add an event listener, call store.on() with event name and callback.

store.on('@dispatch', ([event, data]) => {
  console.log(`Storeon: ${ event } with `, data)
})

store.on() will return cleanup function. This function will remove event listener.

const unbind = store.on('@changed', …)
unbind()

You can dispatch any other events. Just do not start event names with @.

If the event listener returns an object, this object will update the state. You do not need to return the whole state, return an object with changed keys.

// count: 0 will be added to state on initialization
store.on('@init', () => ({ users:  { } }))

Event listener accepts the current state as a first argument and optional event object as a second.

So event listeners can be a reducer as well. As in Redux’s reducers, you should change immutable.

store.on('users/save', ({ users }, user) => {
  return {
    users: { ...users, [user.id]: user }
  }
})

store.dispatch('users/save', { id: 1, name: 'Ivan' })

You can dispatch other events in event listeners. It can be useful for async operations.

store.on('users/add', async (state, user) => {
  try {
    await api.addUser(user)
    store.dispatch('users/save', user)
  } catch (e) {
    store.dispatch('errors/server-error')
  }
})

Components

You can bind the store to React and Preact component with connect() decorator.

import connect from 'storeon/react' // Use 'storeon/preact' for Preact

const Users = ({ users, dispatch }) => {
  const onAdd = useCallback(user => {
    dispatch('users/add', user)
  })
  return <div>
    {users.map(user => <User key={user.id} user={user} />)}
    <NewUser onAdd={onAdd} />
  </div>
}

export default connect('users', Users)

connect() accept the list of state keys to pass into props. It will re-render only if this keys will be changed.

DevTools

Storeon supports debugging with Redux DevTools Extension.

const store = createStore([
  …
  process.env.NODE_ENV !== 'production' && require('storeon/devtools')
])

Or if you want to print events to console you can use built-in logger. It could be useful for simple cases or to investigate issue on online error trackers.