Hummbitv1.x

Quick Start

Install

yarn add hummbit

or

npm install hummbit

Create your first store instance

import { initStore } from "hummbit";

const counterStore = initStore({
  initialState: { count: 0 },
  actions: {
    increment: (state) => ({ count: state.count + 1 }),
    decrement: (state) => ({ count: state.count - 1 }),
  },
  selectors: {
    count: (state) => state.count,
    isPositive: (state) => state.count > 0,
  },
});

The shortest variant uses updater-style actions: actions is an object of functions that receive the current state snapshot and return the next state fragment (patch). It is a good fit for synchronous "pure" actions.

Below is the same counter example, but using actionCreator (explicit action name + access to setState for async/multiple sequential updates):

Actions via actionCreator

import { initStore } from "hummbit";

const counterStore = initStore({
  initialState: { count: 0 },
  actions: ({ actionCreator, setState }) => ({
    increment: actionCreator("increment", () =>
      setState((s) => ({ ...s, count: s.count + 1 })),
    ),
    decrement: actionCreator("decrement", () =>
      setState((s) => ({ ...s, count: s.count - 1 })),
    ),
  }),
  selectors: {
    count: (state) => state.count,
    isPositive: (state) => state.count > 0,
  },
});

When to choose which

  • Use updater-style (actions: { ... }) when the update is synchronous and can be described as state -> patch.
  • Use actionCreator when you need async flow, side effects, a sequence of multiple setState calls, or you want an explicit action name for DevTools/logging.

Actions, selectors, and state snapshots

// One-time immutable snapshot of current state
const before = counterStore.getState();

// Action updates state through the internal serialized queue
await counterStore.actions.increment();

// Selector reads derived data from the current snapshot
const value = counterStore.selectors.count();
const positive = counterStore.selectors.isPositive();

const after = counterStore.getState();

Quick recap:

  • Actions mutate state through controlled updates.
  • Selectors read (and derive) data without mutating state.
  • getState returns the current read-only state view.
Author: Alexey TolkachevLinkedIn