React-mug NPM | npm.io

React Mug

中文 • English。

概要

下一代 React 状态库，为极致的体验而生 —— 极致的既是用户体验，也是开发者体验。

特性

好写

秉承函数式内核，但化繁为简：

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

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

export const get = r((count) => count);

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

透传值的读操作，进一步化简：

// CountState.ts

export const get = r();

好调用

所有状态操作既可以直接调用：

const count = get();

increase(1);

也可以在 React 组件结合调用：

// Count.tsx
import { useR } from 'react-mug';
import { get, increase } from './CountState';

export function Count() {
  const count = useR(get);
  return <button onClick={() => increase(1)}>Count: {count}</button>;
}

好复用

所有操作均可以借助函数态相互复用：

// CountState.ts

export const addOne = w((count) => increase(count, 1));

好读

不必深入函数体就能看明白读写范围：

// CountState.ts

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

好测

直接以函数态轻松测试操作：

// CountState.test.ts
import { increase } from './CountState';

describe('increase', () => {
  test('adds up count and delta', () => {
    expect(increase(1, 2)).toBe(3);
  });
});

可组合

参见下方指南。

可分隔

参见下方指南。

可异步

直接以普通的异步函数定义异步操作：

// CountState.ts

export const set = w();

export const query = async () => {
  const { data: count } = await fetch('/api/count').then((res) => res.json());
  set(count);
};