1 說明
dva-loading 插件是對(duì)異步才起作用的司忱；該插件是對(duì) reducers 新增 state 數(shù)據(jù)（loading 對(duì)象）脸爱，所以瘪阁，在頁面應(yīng)該導(dǎo)入對(duì)應(yīng)的數(shù)據(jù)（也就是 loading 數(shù)據(jù)）类浪，對(duì)其進(jìn)行操作元媚。
1.1 Install
$ npm install dva-loading --save
1.2 Usage
import createLoading from 'dva-loading';
const app = dva();
app.use(createLoading(opts));
2 項(xiàng)目應(yīng)用實(shí)例
src / index.js
index.js
UI Component （UserPage）
import React from 'react';
import { connect } from 'dva';
import { userfetch } from '../actions';
const UserPage = (props) => {
console.log(props.loading);
const { userfetch } = props;
function start() {
userfetch();
}
return(
<div>
<button onClick={start}>發(fā)送請(qǐng)求</button>
</div>
)
}
const mapStateToProps = (state) => {
console.log(state);
return {
user: state.users,
loading: state.loading
}
}
export default connect(mapStateToProps, { userfetch })(UserPage);
說明：
當(dāng)引入 dva-loading 插件之后轧叽，reducers 中的 state 新增了 loading 對(duì)象苗沧，如下圖所示，在 UI Component 打印出結(jié)果炭晒；
-
loading 對(duì)象中有三個(gè)變量待逞，effects、global网严、models。
還沒有發(fā)送異步請(qǐng)求震束，注意loading對(duì)象中三個(gè)變量的初始值 當(dāng)發(fā)送一個(gè)異步請(qǐng)求時(shí)，loading 值的變化割疾，如下圖所示：
異步請(qǐng)求，loading值變化
分析：
1：請(qǐng)求前嘉栓，loading 為：
laoding: {
effects: {}
global: false
models: {}
}
請(qǐng)求前宏榕，global 為 false侵佃，effects 和 models 為空對(duì)象
2：請(qǐng)求中，loading 為：
loading： {
effects: {users/user/fetch: true}
global: true
models: {users: true}
}
global 為 true馋辈；
effects 的 key 為 dispatch 的 type 值抚芦，value 為 true；
models 的 key 為 namespace 值迈螟，value 為 true叉抡；
3：請(qǐng)求完成，loading 為：
loading： {
effects: {users/user/fetch: false}
global: false
models: {users: false}
}
global 為 false卜壕；
effects 的 key 為 dispatch 的 type 值烙常，value 為 false；
models 的 key 為 namespace 值蚕脏，value 為 false；
3 應(yīng)用實(shí)例
import React from 'react';
import { connect } from 'dva';
import { userfetch } from '../actions';
const UserPage = (props) => {
console.log(props.loading);
const { userfetch } = props;
const { error, user } = props.user;
const isFetch = props.loading.effects['users/user/fetch'];
let data = "";
if (isFetch) {
data = '正在加載中秦驯。。译隘。'
} else if (user) {
data = user.data[0]['name'];
} else if (error) {
data = error.message;
}
function start() {
userfetch();
}
return(
<div>
<h1>User</h1>
<p>{data}</p>
<p>
<button onClick={start}>發(fā)送請(qǐng)求</button>
</p>
</div>
)
}
const mapStateToProps = (state) => {
console.log(state);
return {
user: state.users,
loading: state.loading
}
}
export default connect(mapStateToProps, { userfetch })(UserPage);
重點(diǎn)代碼：
const isFetch = props.loading.effects['users/user/fetch'];
- 利用 effects，判斷局部 loading题篷；
- 也可以在項(xiàng)目最上層組件厅目，利用 global 屬性番枚，只要發(fā)送異步請(qǐng)求损敷，就展示 loading 狀態(tài)；
