Skip to content

Commit

Permalink
7. Handle loading state
Browse files Browse the repository at this point in the history
  • Loading branch information
@sorrycc
sorrycc committed Feb 22, 2018
1 parent 2c76347 commit f81d36c
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/pages/users/components/Users.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Table, Pagination, Popconfirm } from 'antd';
import styles from './Users.css';
import { PAGE_SIZE } from '../constants';

function Users({ list: dataSource, total, page: current }) {
function Users({ list: dataSource, loading, total, page: current }) {
function deleteHandler(id) {
console.warn(`TODO: ${id}`);
}
Expand Down Expand Up @@ -43,6 +43,7 @@ function Users({ list: dataSource, total, page: current }) {
<div className={styles.normal}>
<div>
<Table
loading={loading}
columns={columns}
dataSource={dataSource}
rowKey={record => record.id}
Expand All @@ -65,6 +66,7 @@ function mapStateToProps(state) {
list,
total,
page,
loading: state.loading.models.users,

This comment has been minimized.

Sign in to view

Copy link
@openks

openks May 2, 2018

state.loading.models.users 这里的users对应的是modules里的namespace 么? https://github.com/umijs/umi-dva-user-dashboard/blob/master/src/pages/users/models/users.js#L4

This comment has been minimized.

Sign in to view

Copy link
@Verten

Verten Jul 19, 2018

是的
};
}

This comment has been minimized.

Sign in to view

Copy link
@biglemontree

biglemontree Apr 25, 2018

loading

Expand Down

7 comments on commit f81d36c

@usherwong
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

loading: state.loading.models.users
一直不太明白这个是什么意思，在models里只有users，也就是说只有 state.users;state.loading是在哪里定义呢？ @sorrycc

@ReedSun
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@usherwong dva-loading 自动处理 loading 状态了并且存到 Redux 中了，不用自己定义了。

@s97712
Copy link

@s97712 s97712 commented on f81d36c May 7, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sorrycc loading状态什么情况下会改变，代码里没看到修改loading的地方啊，自动修改的话又是在什么时候修改呢，能细说一下吗

@ericxinzhang
Copy link

@ericxinzhang ericxinzhang commented on f81d36c Jul 14, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sorrycc loading状态什么情况下会改变，代码里没看到修改loading的地方啊，自动修改的话又是在什么时候修改呢，能细说一下吗

还没机会看源码，但是我估计dva在每个model的异步effect方法执行的之前，将state.loading.models[namespace]设置成true, 执行完毕之后设置成false.

@hongzelin
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sorrycc loading状态什么情况下会改变，代码里没看到修改loading的地方啊，自动修改的话又是在什么时候修改呢，能细说一下吗

laoding 的状态是在触发异步的时候改变；sorrycc大神都说了，是利用dva-loading这个插件处理loading的，dva-loading是对reducers新增state数据（也就是loading对象），loading对象中有三个属性，分别为effects、global、models，effects的key为dispatch type的值，global为全局变量，只要触发异步，这个值就会从false变为true，models的key为namespace；具体用redux工具看一下就知道了。

@whg517
Copy link

@whg517 whg517 commented on f81d36c Oct 23, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在这里做个笔记吧，为了大家在看 loading 的时候更好理解。
有时候会出现调用 model 的 state 的部分数据变动才重新加载的情况，而如果直接使用 loading.models[namespace] 这个 state 的 loading 的话，会造成不必要的渲染，页面的微小变动然使用者感觉奇怪。这时可以通过使用 loading.effects[<some-effects>] 或者 loading.reducers[<some-reducer>] 来获取对应异步操作的状态。

参考 ant-design/ant-design-pro#3067 中的代码。

@connect(({ technicalFramework, constants, loading }) => ({
  constants,
  technicalFramework,
  constantsLoading: loading.effects['constants/getConstants'],
  currentTechnicalFrameworkLoading: loading.effects['technicalFramework/getTechnicalFramework'],
  submitting: loading.effects['technicalFramework/saveTechnicalFramework'],
}))

这里以我自己的 model 为例，如果直接打印 loading 的话，可以获取如下信息。

{
    "effects": {
        "task/fetch": false,
        "task/fetchProjects": false,
        "task/fetchSpidersOfVersion": false,
        "task/fetchVersionsOfProject": false,
        "user/fetchCurrent": true,
        "__proto__": "Object"
    },
    "global": true,
    "models": {
        "task": false,
        "user": true,
        "__proto__": "Object"
    },
    "__proto__": "Object"
}

@baixiaoyu2997
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

正常使用的时候应该是单独使用effects来监听load状态，state.loading.models.users这种使用方法应该是监听models.users里所有的effects

Please sign in to comment.