我认为这个问题有机会非常有帮助/有教育意义,我将分享很多我已经做过的事情。为了帮助阐述这个问题,下面是一个示例,说明我正在构建的应用程序的典型容器组件的外观(从redux /数据流的角度来看):
// Import React Components
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchDataA } from '../actions/data-a-action.js';
import { fetchDataB } from '../actions/data-b-action.js';
import { fetchDataC } from '../actions/data-c-action.js';
class WhiteBoard extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.dispatch(fetchDataA());
this.props.dispatch(fetchDataB());
this.props.dispatch(fetchDataC());
}
render() {
if(this.props.error1) { return <div> error message </div> }
if(this.props.error2) { return <div> error message </div> }
if(this.props.error3) { return <div> error message </div> }
if(this.props.loading) { return <div> Loading Screen </div> }
return (
<div>
<p> A website with only a p tag </p>
</div>
);
}
}
function mapStateToProps(reduxState) {
console.log('reduxState: ', reduxState);
return {
dataA: reduxState.DataAReducer.sportsData,
dataB: reduxState.DataBReducer.sportsData,
dataC: reduxState.DataCReducer.sportsData,
loading: (reduxState.DataAReducer.loading ||
reduxState.DataBReducer.loading ||
reduxState.DataCReducer.loading),
error1: reduxState.DataAReducer.error,
error2: reduxState.DataBReducer.error,
error3: reduxState.DataCReducer.error
};
}
export default connect(mapStateToProps)(WhiteBoard);
我所有的减速器都是相同的-有效负载具有返回的sportsData
,loading
和error
。加载数据时,loading == true
。如果数据获取成功,sportsData将拥有我需要的数据,否则将返回错误。
对于涉及从我的数据库中的5个以上的集合中获取数据的我的应用程序,mapStateToProps函数变成一堆非DRY代码。创建道具error1,error2,error3等也感觉很糟糕。
对于通过带redux的操作/归约器进行的数据提取,是否有针对此类错误/加载处理的更好实践?还是我已经做到了这是最佳实践?
编辑:让我知道共享操作/归约代码是否有帮助。我不想过多地散布这篇文章,但也许这些会有所帮助?
答案 0 :(得分:0)
无论引发数据错误的数据调用如何,您都应调用一个错误操作,该操作将调用相同的reducer。像这样:
try {
const res = await fetchData()
dispatch(success_data(data)
} catch (err) {
dispatch(sameErrorAction)
}
然后,如果有错误,您可以对数据进行任何处理,但不必分别处理每个错误。