React Mug

Synopsis  •  Functionalities  •  Install  •  Usage  •  License

English  •  中文

Synopsis

Possibly the optimal way to functionally manage states.

Functionalities

✦ Rapid creation from pure funcitons for directly callable state operations.
✦ Zero-step integration with React.
✦ Full leverage on ES modules for code organization.
✦ State composition.
✦ State segregation.
✦ Async operations.
✦ Functionally test state operations.
✦ Easily test actual state changes.
✦ Strong support for types.

Install

npm i react-mug

Usage

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

export interface CounterState {
  value: number;
}

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

export const getValue = r((state) => state.value);

export const increase = w((state, delta: number) => ({ ...state, value: state.value + delta }));

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

import { getValue } from './CounterMug';

export function CounterDisplay() {
  const value = useR(getValue);
  return <div>Value: {value}</div>;
}

// CounterControl.tsx
import { increase } from './CounterMug';

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

License

Apache 2.0.