realmerit-mobx

doc

- createContainer 工厂函数创建上下文

``tsx
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 (


`ts
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 的各种

`ts
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 |
-------------------|---------|----------|---------|---------|-------------------
``