React Mug

Synopsis  •  Functionalities  •  Install  •  Usage  •  Guide  •  APIs  •  License.

English  •  中文.

Synopsis

Possibly the optimal way to functionally manage states.

Functionalities

✦ Rapid creation of directly callable state operations from pure functions.
✦ Zero-step integration with React.
✦ Full leverage on ES Modules for code organization.
✦ Functionally reusing state operations.
✦ Async operations.
✦ State composition.
✦ Trait segregation.
✦ Functionally testing state operations.
✦ Easily testing actual state values.
✦ Strong support for types.

Install

npm i react-mug

Usage

Create a state and the operations:

// CountMug.ts
import { construction, upon } from 'react-mug';

const { r, w } = upon<number>({
  [construction]: 0,
});

export const get = r();

export const increase = w((count, delta: number) => count + delta);

Use them straight:

// CountDisplay.tsx
import { useR } from 'react-mug';

import { get } from './CountMug';

export function CountDisplay() {
  const count = useR(get);
  return <strong>The count is {count}.</strong>;
}

// CountControl.tsx
import { increase } from './CountMug';

export function CountControl() {
  return <button onClick={() => increase(1)}>Increase by 1</button>;
}

Enjoy the smoothness.

Guide

Manage One State.
Compose Multiple States.
Segregate General Traits.

APIs

See also src/index.

License

Apache 2.0.