Как обработать один индикатор загрузки для всего приложения, используя React и Redux? - PullRequest
Новая
       12

Как обработать один индикатор загрузки для всего приложения, используя React и Redux?

0 голосов
/ 23 октября 2019

Моему веб-приложению иногда нужно опрашивать серверную часть для получения данных. Эти действия обычно занимают около 6 или 7 секунд. И во время этих опросов я хочу, чтобы пользователям не разрешалось взаимодействовать с пользовательским интерфейсом.

Что я сделал, так это то, что в каждом состоянии компонента есть некоторые флаги, такие как loading, success, * 1005. * для отображения статуса загрузки на уровне компонента. Но пользователи все еще могут взаимодействовать с другими компонентами => это делает обработку крайних случаев очень трудной. Итак, я хочу, чтобы, когда приложение находилось в состоянии опроса, пользователь не мог взаимодействовать с другим компонентом для предсказуемого и согласованного потока.

Я ожидаю, что модальное всплывающее окно появляется всякий раз, когда происходит опрос, тогда только пользователиПосмотрите на это модальное всплывающее окно с некоторым статусом загрузки и не можете взаимодействовать в интерфейсе пользователя.

Не могли бы вы, ребята, предложить мне направление для этого? Использование Redux (лучше, если я смогу повторно использовать модальное всплывающее окно из Antd https://ant.design/components/modal/#header).

1 Ответ

0 голосов
/ 23 октября 2019

позвольте мне поделиться своим кодом

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);
}

error message

полная страница enter image description here

дайте мне знать, если вы можете реализовать это или нет.

...