https://github.com/niqingyang/mobx-loading
参考了 dva-loading 的思路，基于 mobx 实现了用于监控各个 mode 和 effect 加载状态的组件
https://github.com/niqingyang/mobx-loading
dva loading mobx
Last synced: 2 months ago
JSON representation
参考了 dva-loading 的思路，基于 mobx 实现了用于监控各个 mode 和 effect 加载状态的组件
- Host: GitHub
- URL: https://github.com/niqingyang/mobx-loading
- Owner: niqingyang
- License: apache-2.0
- Created: 2019-05-26T14:20:40.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-02T06:13:15.000Z (over 6 years ago)
- Last Synced: 2025-10-11T11:07:35.357Z (7 months ago)
- Topics: dva, loading, mobx
- Language: JavaScript
- Homepage: https://acme.top/mobx-react-stores-doc
- Size: 42 KB
- Stars: 25
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mobx-loading
参考了 dva-loading 的思路，基于 mobx 实现了用于监控各个 model 和 effect 加载状态的组件
## Installation
```js
npm install --save mobx-loading
```
## Usage
### 1.使用装饰器监控相关的 action
```js
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 中
```js
import {loadingStore} from 'mobx-loading'
// ....
store.loading = loadingStore;
ReactDOM.render(
,
document.getElementById('root')
);
```
### 3.React 组件中应用
```js
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](https://opensource.org/licenses/Apache-2.0) Copyright (c) 2019