concent-plugin-loading

一个轻松控制concent应用loading状态的插件

在线示例

如何使用

在启动concent的时候配置好插件，就可以使用了

1import { run } from 'concent';
2import loadingPlugin from 'concent-plugin-loading';
3import student from './models/student';
4import product from './models/product';
5
6run(
7  { student, product },
8  {
9    //配置loading插件
10    plugins:[loadingPlugin],
11  }
12);
13

读取loading值，loadingPlugin会注册自己的模块loading,该模块的key就是其他concent里所有模块的名字，值就是这个模块loading值，true表示该模块正在调用异步函数， false表示调用异步函数函数结束

1import { register } from 'concent';
2import React, { Component } from 'react';
3
4@register({ 
5  module: 'student', 
6  //连接loading模块，关心student模块的loading状态
7  connect:{'loading':['student']},
8  //如关心某个具体的方法loading状态，可以写为
9  //connect:{'loading':['student/m1', 'student/m2']},
10})
11export default class StudentPanel extends Component {
12
13  changeName = () => {
14    this.ctx.dispatch('handleStudentNameChange', this.state.tmpName);
15  }
16
17  render() {
18    const { name, tmpName } = this.state;
19    const loading = this.ctx.connectedState.loading.student;
20    console.log('@@@ StudentPanel', loading);
21
22    return (
23      <div>
24         {loading? '提交中':''}
25        <p>name: {name}</p>
26        <input value={tmpName} onChange={this.ctx.sync('tmpName')} />
27        <button onClick={this.changeName}>修改名字</button>
28      </div>
29    );
30  }
31}
32

reducer定义

1// code in models/student/reducer.js
2const sleep = (ms = 3000)=> new Promise(resolve=> setTimeout(resolve, ms));
3
4export async function trackNameChangeEvent(){
5  console.log('trackNameChangeEvent');
6}
7
8export async function updateStudentName({payload:name}){
9  await sleep();//模拟请求后端更新name
10  return {name};
11}
12
13export async function handleStudentNameChange({dispatch, payload:name}){
14  await dispatch('updateStudentName', name);
15  await dispatch('trackNameChangeEvent', name);
16}

• 注意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的过程

1// code in models/student/reducer.js
2const sleep = (ms = 3000)=> new Promise(resolve=> setTimeout(resolve, ms));
3
4export async function updateStudentName({payload:name, dispatch}){
5  await sleep();//模拟请求后端更新name
6
7  //这里会触发loading插件去改写product模块的loading值
8  await dispatch('product/fetchProductList');
9  return {name};
10}