niqingyang / mobx-loading

参考了 dva-loading 的思路，基于 mobx 实现了用于监控各个 mode 和 effect 加载状态的组件

mobx-loading

参考了 dva-loading 的思路，基于 mobx 实现了用于监控各个 model 和 effect 加载状态的组件

Installation

npm install --save mobx-loading

Usage

1.使用装饰器监控相关的 action

import {action} from 'mobx'
import {loading} from 'mobx-loading'

class User {
    
    // .... some things
    
    @loading
    @action
    fetchUser = () => {
        // ...do some things
        // 返回一个 Promise 对象
        return Promise;
    }
    
    @loading
    @action
    fetchList = () => {
        // ...do some things
        // 也可以不返回 Promise 对象
    }
    
    @loading('user')
    @action
    fetchA = () => {
        // ...do some things
        // 返回一个 Promise 对象
        return Promise;
    }
    
    @loading('user/a')
    @action
    fetchB = () => {
        // ...do some things
        // 返回一个 Promise 对象
        return Promise;
    }
    
    @loading(['user', 'c'])
    @action
    fetchC = () => {
        // ...do some things
        // 返回一个 Promise 对象
        return Promise;
    }
    
    // .... some things
}

2.放入 store 中

import {loadingStore} from 'mobx-loading'

// ....

store.loading = loadingStore;

ReactDOM.render(
    <Provider {...store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

3.React 组件中应用

import {inject} from 'mobx-react';

@inject(({loading}) => {
    featchUserLoading: loading.actions['user/fetchUser'],
    featchListLoading: loading.actions['user/fetchList'],
    featchALoading: loading.actions['user/a'],
    featchBLoading: loading.actions['user/b'],
    featchCLoading: loading.actions['user/c'],
    userLoading: loading.models.user,
    globalLoading: loading.global
})
class XXX extends React.Component {
    // ....
}

License

Apache 2.0 Copyright (c) 2019

mobx-loading's Issues

取不到loading的值

示例：
https://codesandbox.io/s/morning-water-x64bn?fontsize=14

部署以后 key 会改变，导致取不到

@loading 修饰过的方法不能 catch

虽然 catch 到异常了, 但是异常仍然被抛到了外面.

Uncaught (in promise) Error: test

class MyStore {
  @loading async load() {
    throw new Error('test')
  }
}

(async () => {
  try {
    await new MyStore().load()
  } catch (err) {
    console.log(err.message)
  }
})()

ts 支持

请问ts 是否有支持计划