1 说明
dva-loading 插件是对异步才起作用的；该插件是对 reducers 新增 state 数据（loading 对象），所以，在页面应该导入对应的数据（也就是 loading 数据），对其进行操作。
1.1 Install
$ npm install dva-loading --save
1.2 Usage
import createLoading from 'dva-loading';
const app = dva();
app.use(createLoading(opts));
2 项目应用实例
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}>发送请求</button>
</div>
)
}
const mapStateToProps = (state) => {
console.log(state);
return {
user: state.users,
loading: state.loading
}
}
export default connect(mapStateToProps, { userfetch })(UserPage);
说明：
当引入 dva-loading 插件之后，reducers 中的 state 新增了 loading 对象，如下图所示，在 UI Component 打印出结果；
-
loading 对象中有三个变量，effects、global、models。
还没有发送异步请求，注意loading对象中三个变量的初始值 当发送一个异步请求时，loading 值的变化，如下图所示：
异步请求，loading值变化
分析：
1：请求前，loading 为：
laoding: {
effects: {}
global: false
models: {}
}
请求前，global 为 false，effects 和 models 为空对象
2：请求中，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：请求完成，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 应用实例
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}>发送请求</button>
</p>
</div>
)
}
const mapStateToProps = (state) => {
console.log(state);
return {
user: state.users,
loading: state.loading
}
}
export default connect(mapStateToProps, { userfetch })(UserPage);
重点代码：
const isFetch = props.loading.effects['users/user/fetch'];
- 利用 effects，判断局部 loading；
- 也可以在项目最上层组件，利用 global 属性，只要发送异步请求，就展示 loading 状态；
