Как передать спиннинг на другой компонент в ReactJS

Question

Я нахожусь в сценарии, где я должен добавить вращающуюся черту в компоненте, скажем,

List.js

class List extends Component {
  constructor(props) {
    super(props);
 }
  render() {
    return (
      <div>
       //spinning bar should be displayed here

      </div>
    );
  }}

Но вращающаяся строка должна отображаться, когда вызывается другой метод в Actions (например, redux). Так как я передам это из actions.js компоненту рендеринга в List.js

Actions.js

export const getList = (listInfo) => dispatch => {
 //Spinning should start here
  return application.getClientInfo(userInfo).then(
    listInfo => {
//spinning should stop here
          return dispatch(getListInfo(listInfo))
    },
    error => {
      return dispatch(apologize('Error in getting application'))
    }

  )

}

getList и ListComponent вызывается в main.js

main.js

render() {
         this.props.getClientApplication(this.props.user);

      return (
            <div>
                   <List />
            </div>

      );
    }

Итак, как мне добавить метод рендеринга, который будет отображаться в list.js? Пожалуйста, помогите

Answer 1

В вашем редукторе сохраните состояние загрузки и отправьте действие, чтобы установить и очистить состояния загрузки, как и когда вы хотите

class List extends Component {
  constructor(props) {
    super(props);
 }
  render() {
    const { isLoading } = this.props;
    return (
      <div>
       //spinning bar should be displayed here
       {isLoading  &&  <Spinner>}
      </div>
    );
  }
}

Actions.js

export const spinner = isLoading => {
  return {
    type: actionType.SPINNER, isLoading
  }
}
export const getList = (listInfo) => dispatch => {
 //dispatch loading action
  dispatch(spinner(true));
  return application.getClientInfo(userInfo).then(
    listInfo => {
          dispatch(spinner(false))
          return dispatch(getListInfo(listInfo))
    },
    error => {
      dispatch(spinner(false))
      return dispatch(apologize('Error in getting application'))
    }

  )

}

Также убедитесь, что вы не отправляете действие при рендеринге без использования приостановки

render() {
         this.props.getClientApplication(this.props.user);

      return (
            <div>
                   <List isLoading={this.props.isLoading} />
            </div>

      );
    }