realmerit-mbox

realmerit-mobx

doc

• createContainer 工厂函数创建上下文

class Test {
  count: number;
  constructor() {
    this.count = 0;
    makeAutoObservable(
      this,
      {},
      {
        autoBind: true,
      }
    );
  }
  inc() {
    this.count += 1;
  }
}
const { Provider, useStore } = createContainer(() =>
  useLocalObservable(() => new Test())
);

const Count: React.FC = observer(() => {
  const store = useStore();

  return (
    <div>
      <button type="button" onClick={store.inc}>
        add
      </button>
      <span data-testid="test1">{store.count}</span>
    </div>
  );
});
const Count2: React.FC = observer(() => {
  const store = useStore();
  return (
    <div>
      <span data-testid="test2">{store.count}</span>
    </div>
  );
});
export const App: React.FC = () => {
  return (
    <StrictMode>
      <Provider>
        <Count />
      </Provider>
      <Provider>
        <Count2 />
      </Provider>
    </StrictMode>
  );
};

• withRequest 处理 loading 和函数正在运行的 flag

class Test {
  loadingStore: LoadingStore<'loadingName'>;
  constructor() {
    this.loadingStore = new LoadingStore();
    // this.invoke必须是一个async
    // 第二个参数不填则代表不需要loading
    this.invoke = withRequest(this.invoke, 'loading的key');
  }
  async invoke() {
    // do sth
  }
  // 获得loading
  this.loadingStore.get(`loading的key`)
}

• TableStore 类似 usePagenation 内聚 table 的各种

class Test {
  tableStore: TableStore;
  constructor() {
    this.tableStore = new TableStore(Api.getData, {
      // rowKey 必传
      rowKey: 'id',
      defaultPageSize: 50,
      currentKey: 'current',
      pageSizeKey: 'pageSize',
      defaultParam: { defaultParam: 'i am defaultParam' },
      // formatResult强制返回total,dataSource的格式
      formatResult: res => {
        return {
          total: res.total,
          dataSource: res.dataSource,
        };
      },
    });
  }
}
const t = new Test();
// t.tableStore.table => 返回NETable需要的各种(只读)
// t.tableStore.dataSource => 返回dataSource提供修改

测试覆盖率

-------------------|---------|----------|---------|---------|-------------------
File               | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------------|---------|----------|---------|---------|-------------------
All files          |     100 |      100 |     100 |     100 |
 src               |     100 |      100 |     100 |     100 |
  utils.ts         |     100 |      100 |     100 |     100 |
 src/enhance       |     100 |      100 |     100 |     100 |
  ...Container.tsx |     100 |      100 |     100 |     100 |
  withRequest.ts   |     100 |      100 |     100 |     100 |
 src/hooks         |     100 |      100 |     100 |     100 |
  useReaction.ts   |     100 |      100 |     100 |     100 |
  useWhen.ts       |     100 |      100 |     100 |     100 |
 ...e/LoadingStore |     100 |      100 |     100 |     100 |
  index.ts         |     100 |      100 |     100 |     100 |
 ...ore/TableStore |     100 |      100 |     100 |     100 |
  index.ts         |     100 |      100 |     100 |     100 |
-------------------|---------|----------|---------|---------|-------------------