concent-plugin-loading
一个轻松控制concent应用loading状态的插件
在线示例
如何使用
在启动concent的时候配置好插件,就可以使用了
;;;; ;
读取loading值,loadingPlugin
会注册自己的模块loading
,该模块的key就是其他concent
里所有模块的名字,值就是这个模块loading值,true表示该模块正在调用异步函数,
false表示调用异步函数函数结束
;; @ { thisctx; } { const name tmpName = thisstate; const loading = thisctxconnectedStateloadingstudent; console; return <div> loading? '提交中':'' <p>name: name</p> <input value=tmpName onChange=thisctx /> <button onClick=thischangeName>修改名字</button> </div> ; }
reducer定义
// code in models/student/reducer.jsconst sleep = ; { console;} { await ;//模拟请求后端更新name return name;} { await ; await ;}
- 注意1,reducer函数的格式
仅当你的调用的reducer函数为async函数或者generator函数时,loading插件会改变各个模块loading的值
- 注意2,对同一个模块并行发起多个dispatch
对同一个模块并发起多个dispatch时,只有全部函数执行结束loading才会变成false
changeName = () => {
//假设student模块存在以下3个reducer函数,这里同时调了3次
//全部结束时,student模块的loading才会写为false
this.ctx.dispatch('handleStudentNameChange', this.state.tmpName);
this.ctx.dispatch('handleStudentNameChange2', this.state.tmpName);
this.ctx.dispatch('handleStudentNameChange3', this.state.tmpName);
}
- 注意2,dispatch穿插调用
在一个模块的reducer函数里,调用了另外模块的reducer函数,那个模块的loading值也会经历变成true然后变成false的过程
// code in models/student/reducer.jsconst sleep = ; { await ;//模拟请求后端更新name //这里会触发loading插件去改写product模块的loading值 await ; return name;}