折腾：
期间， 对于前端Antd Pro中，页面中经常始终显示正在加载的提示，而且感觉js的fetch都返回了，但是loading还是没有消失
看起来像是loading没有正确绑定啊
现在已有的绑定是：
@connect(({ script, topic, functionGroup, loading }) => ({
script,
topic,
functionGroup,
loading: loading.models.script,
}))
@Form.create()
export default class AllScriptList extends PureComponent {感觉
loading: loading.models.script,
需要优化？
因为之前见到过别的类似的：
@connect(({ loading, user, functionGroup }) => ({
submitting: loading.effects['functionGroup/updateFunctionGroupAndMembers'],
user,
functionGroup,
}))
@Form.create()
export default class FunctionGroupDetail extends PureComponent {所以去找找看真正的用法
antd pro loading
antd pro loading 如何绑定
ant design pro loading
去改为：effects看看效果
// loading: loading.models.script, loading: loading.effects['script/fetch'],
结果：
问题依旧
换成自己的state的loading：
export default class AllScriptList extends PureComponent {
state = {
isLoadingScript: false,
...
this.setState({isLoadingScript: true})
dispatch({
type: 'script/fetch',
// payload: payload,
payload: mergedParams,
}).then( ()=> {
console.info("Loading script done")
this.setState({isLoadingScript: false})
})
<SimpleTable
// loading={loading}
loading={this.state.isLoadingScript}结果现象依旧：
也是虽然yield返回了数据 -》 props变化传递给了render -〉 过了好半天，fetch才最终返回 -》才看到：
script fetch queryScripts: response=和Loading script done
所以感觉问题倒不是loading绑定的问题，倒像是：
*fetch({ payload }, { call, put }) {
console.log("script fetch queryScripts: payload=", payload)
const response = yield call(queryScripts, payload);
console.log("script fetch queryScripts: response=", response)
yield put({
type: 'queryList',
payload: Array.isArray(response.results) ? response : [],
});
},中，从
const response = yield call(queryScripts, payload);
到
console.log(“script fetch queryScripts: response=”, response)
中间相隔的时间很久
其中自己给对应的model中加上yield后的callback的put中改变loading -》 就可以早点结束loading了！
去试试
effects: {
*fetch({ payload }, { call, put }) {
console.log("script fetch queryScripts: payload=", payload)
const response = yield call(queryScripts, payload);
console.log("script fetch queryScripts: response=", response)
yield put({
type: 'queryList',
payload: Array.isArray(response.results) ? response : [],
})
yield put({
type: 'endLoading',
payload: false,
})
},
reducers: {
endLoading(state, action){
console.log("endLoading: state=", state, ",action=", action)
return {
...state,
loading: action.payload,
};
},
queryList(state, action) {
console.log("queryList: state=", state, ",action=", action)
return {
...state,
scripts: action.payload,
};
},结果发现：
不是没有早点去设置loading的问题
【总结】
最后经过：
【已解决】Antd Pro中前端列表页面loading加载很慢
后续的折腾，确定了，不是antd pro的loading绑定的问题。
而Antd Pro中，正确的绑定，就是之前的：
@connect(({ script, topic, functionGroup, loading }) => ({
script,
topic,
functionGroup,
// loading: loading.models.script,
loading: loading.effects['script/fetch'],
}))
@Form.create()
export default class AllScriptList extends PureComponent {
state = {
}
...
render() {
const { script: { scripts }, loading } = this.props;
...
return (
...
<SimpleTable
loading={loading}
data={scripts}
columns={columns}
scroll={{ x: 1800 }}
rowKey='id'
onChange={this.handleStandardTableChange}
/>
</div>
}
}其中表示loading映射到了：
src/models/script.js
即：models中的script
而：
- loading: loading.models.script
- 表示整个的script的model
- loading: loading.effects[‘script/fetch’]
- 表示只映射到script/fetch所对应的：
- src/models/script.js中的effects中的fetch：
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryScripts, payload);
yield put({
type: 'queryList',
payload: Array.isArray(response.results) ? response : [],
})
yield put({
type: 'endLoading',
payload: false,
})
},然后正常的加载Table时，就可以：
在script/fetch没有返回时，就显示loading的效果了：
有个loading的图标 + 页面不可操作
而在fetch返回后，即可显示数据，且可以操作了：
