позвольте мне поделиться своим кодом
route_reducer.js
const INITIAL_STATE = {
....
errorMessage: "",
loading: false
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
....
case UPDATE_ERROR:
return {
...state,
errorMessage: action.payload.error,
loading: action.payload.loading
};
default:
return state;
}
};
route_actions.js
//update loading spinner and error message
export const updateErrorAndLoading = (error = "",loading = false) => async dispatch => {
dispatch({ type: UPDATE_ERROR, payload: { error, loading } });
};
Home.js
вы должны иметь дело с условным рендерингом (в вашем приложении или чем-то еще). если this.props.loading
true, то показать счетчик и не показывать другие компоненты ... и т. д.
import { Spin } from "antd";
class Home extends Component {
render() {
//you can pass error message or check some conditions like
//this.props.errorMessage.trim() === "" ?null: <div>your custom componet..etc, {this.props.errorMessage}</div>
const spinner = this.props.loading ? (
<Spin size="large" className="spinner" />
) : null;
return (
<>
{/* spinner */}
{spinner}
</>
const mapStateToProps = state => {
return {
...,
errorMessage: state.route.errorMessage,
loading: state.route.loading
};
};
export default connect(
mapStateToProps,
actions
)(Home);
App.css make class .spinner
position fixed
или absolute
в соответствии с вашими потребностями и предоставьте свои собственные атрибуты CSS
/* spinner */
.spinner {
position: fixed !important;
top: 10em;
margin-left: 10px !important;
margin-top: 10px !important;
height: 50px;
left: 1em;
z-index: 200;
}
в любой компонент, вы можете передать сообщение об ошибке или состояние загрузки
showSpinner=()=>{
this.props.updateErrorAndLoading("some error occured", true);
}
closeSpinner=()=>{
this.props.updateErrorAndLoading(undefined, undefined);
}
полная страница
дайте мне знать, если вы можете реализовать это или нет.