dva-loading

dva-loading 会监听指定的异步请求方法，方法开始时loading状态值为 true ，异步结束后该值自动置为 false , 可用于骨架屏或某些需要 loading 状态的场景！

bash

yarn add dva-loading

index.js

JavaScript

import createLoading from 'dva-loading';
// ...
app.use(createLoading());
// ...

1
2
3
4

models/demoModel.js

JavaScript

const delay = (interval = 1000) => {
    // ...
};
export default {
    namespace: 'demo',
    state: {
        num: 0
    },
    reducers: {
        test(state) {
            state = { ...state };
            state.num++;
            return state;
        }
    },
    effects: {
        *testAsync(action, { call, put }) {
            yield call(delay, 2000);
            yield put({
                type: 'test'
            });
        }
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

组件中使用

JavaScript

import { connect } from "dva";
...
const Demo = function Demo({ num, loading, dispatch }) {
    loading = loading.effects['demo/testAsync'];
    return <DemoBox>
        <span className="num">{num}</span>
        <Button type="primary" danger
            loading={loading}
            onClick={() => {
                dispatch({ type: 'demo/testAsync' });
            }}>
            异步按钮
        </Button>
    </DemoBox>;
};
export default connect(
    state => {
        return {
            ...state.demo,
            loading: state.loading
        };
    }
)(Demo);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

dva-loading #

dva-loading