Bibux NPM | npm.io

DISCLAIMER

This project is still a work in progress and in early development.

BIBUX

Bibux, pronounced /bibyks/ (or "beebewx" in English), is an elegant React state management library with strong typing and a simple API.

Documentation

You can follow this README to get started quickly, or read the full documentation on bibux.org.

Setup

Install Bibux:

npm install bibux

Then, define your createStore using the init function:

import { init } from "bibux";

export const { createStore } = init();

You're ready to go!

Usage

Simply create a store with createStore:

export const counterStore = createStore({
    state: {
        counter: 0,
    },
    actions: {
        incr: s => s.counter++,
        decr: s => s.counter--,
        add: (s, n: number) => {
            s.counter += n;
        },
    },
});

Then use it directly in your components:

import { counterStore } from "./store";

const Counter = () => {
    const { counter } = counterStore.useState();
    const { incr, decr, add } = counterStore.useActions();
    return <div>
        {counter}
        <button onClick={incr}>+</button>
        <button onClick={decr}>-</button>
        <button onClick={() => add(10)}>+10</button>
    </div>;
};

Getters

If you need to compute values from your state, you can use getters:

export const counterStore = createStore({
    state: {
        counter: 0,
    },
    getters: {
        double: s => s.counter * 2,
    },
});

Getters are directly available in store.useState():

const { counter, double } = counterStore.useState();

Transitions

If you need to perform asynchronous operations, you can use transitions:

const authStore = createStore({
    state: {
        loading: false,
        username: undefined as string | undefined,
    },
    getters: {
        connected: s => s.username !== undefined,
    },
    actions: {
        logout: s => {
            s.username = undefined;
        },
    },
    transitions: {
        login: async ({ set, get }, username: string, password: string) => {
            if (get().loading) throw new Error("Already loading...");
            set(s => s.loading = true);
            await API.login(username, password);
            set(s => {
                s.username = username;
                s.loading = false;
            });
            console.log("Connected as", get().username);
        },
    },
});

Transitions are available in store.useTransitions():

const Demo = function () {
    const { connected, username, loading } = authStore.useState();
    const { logout } = authStore.useActions();
    const { login } = authStore.useTransitions();
    if (loading)
        return <div>Loading...</div>;
    if (connected)
        return <div>
            Connected as {username}
            <button onClick={logout}>
                Logout
            </button>
        </div>;
    return <div>
        <button onClick={() => {
            login("user", "pass")
                .then(() => console.log("logged in"))
                .catch(console.error);
        }}>
            Login
        </button>
    </div>;
}

State mutations

Internally, Bibux uses immer to handle state mutations. This means that you can mutate your state directly in your actions and transitions, and Bibux will take care of creating a new immutable state for you.

Middlewares

You can use middlewares to intercept actions and transitions:

Simply register your middlewares when calling init:

import { init } from "bibux";

export const { createStore } = init({
    middlewares: [
        // ...
    ],
});

To create your own middleware, simply use the createMiddleware function:

import { createMiddleware } from "bibux";

const logger = createMiddleware({
    action: ({ name, args, run }) => {
        console.log("Before action", name, args);
        run();
        console.log("After action", name, args);
    },
    transition: async ({ name, args, run }) => {
        console.log("Before transition", name, args);
        await run();
        console.log("After transition", name, args);
    },
});

Popular middlewares

Store enhancers

WIP

Popular store enhancers

bibux-undo

Difference between middlewares and store enhancers

Basically, both middlewares and store enhancers serve the same purpose: they allow you to intercept actions and transitions. The main difference is that middlewares are applied to every store, while store enhancers are applied to a specific store.