@xialvjun/mobx-loading
v0.1.0
Published
add typesafe loading to actions in mobx(compatible for mobx 4/5/6).
Downloads
1
Readme
mobx-loading
add typesafe loading to actions in mobx(compatible for mobx 4/5/6).
concept
loading.some: boolean
is global loading;loading[this_action_name]: Parameters<typeof this_action>[]
is this action's all calling parameters, so you can do many things like debounce action;loading[this_action_name].length > 0
is this action loading;
examples
see git examples
directory.
mobx 6
import { makeAutoObservable, autorun } from "mobx";
import { makeAutoLoading } from "@xialvjun/mobx-loading";
class A {
// loading: makeAutoLoading<A, "loading">; makeAutoLoading(this, "loading");
// the three 'loading' must be the same
loading: makeAutoLoading<A, "loading">;
num = 0;
get num_plus_100() {
return this.num + 100;
}
constructor() {
makeAutoLoading(this, "loading");
makeAutoObservable(this);
}
*a() {
// we can access action a's all calling parameters to debounce
const last_args = this.loading.a.slice(-1)[0];
yield delay(2000);
if (last_args !== this.loading.a.slice(-1)[0]) return;
this.num += 1;
console.log(this.num);
}
async b() {
}
c = function* (this: A) {
};
d = async () => {
};
}
const t = new A();
autorun(() => console.log(t.loading.some, JSON.stringify(t)));
mobx 5 / mobx 4
import { observable, autorun, flow } from "mobx";
import { autoLoading } from "@xialvjun/mobx-loading";
const a = {
num: 0,
a: flow(function* () {
const last_args = this.loading.a.slice(-1)[0];
yield delay(2000);
if (last_args !== this.loading.a.slice(-1)[0]) return;
this.num += 1;
console.log(this.num);
}),
async b() {
const last_args = this.loading.b.slice(-1)[0];
await delay(2000);
if (last_args !== this.loading.b.slice(-1)[0]) return;
this.num += 100;
console.log(this.num);
},
};
const b = autoLoading(a, "loading");
const t = observable(b);
autorun(() => console.log(t.loading.some, JSON.stringify(t)));