Как показать индикатор активности до данных, если они были получены из Firebase с использованием Redux

Question

Я использую FireBase в качестве базы данных для извлечения данных в реактивном приложении с использованием Redux. Я хочу показать индикатор активности, пока данные не будут получены. Вот мой код Redux:

export function getHome() {
  const request = axios({
    method: "GET",
    url: `${FIREBASEURL}/home.json`
  })
    .then(response => {
      const articles = [];
      for (let key in response.data) {
        articles.push({
          ...response.data[key],
          id: key
        });
      }

      return articles;
    })
    .catch(e => {
      return false;
    });

  return {
    type: GET_HOME,
    payload: request
  };
}

Вот мой код React Native, где будут отображаться данные:

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  ActivityIndicator,
  TouchableWithoutFeedback,
  Image
} from "react-native";
import { connect } from "react-redux";
import { getHome } from "../store/actions/home_actions";
import DemoScreen from "./rn-sound/demo";

class HomeScreen extends Component {
  componentDidMount() {
    this.props.dispatch(getHome());
  }
  renderArticle = imgs =>
    imgs.articles
      ? imgs.articles.map((item, i) => (
          <TouchableWithoutFeedback
            onPress={() => this.props.navigation.navigate(`${item.navigate}`)}
            key={i}
          >
            <View>
              <View>
                <Image
                  style={{
                    height: 220,
                    width: "100%",
                    justifyContent: "space-around"
                  }}
                  source={{ uri: `${item.image}` }}
                  resizeMode="cover"
                />
              </View>
              <View>
                <Text >{item.name}</Text>
              </View>
              <View>
                <Text }>{item.tagline}</Text>
              </View>
            </View>
          </TouchableWithoutFeedback>
        ))
      : null;

  render() {
      return (
        <ScrollView}>
          {this.renderArticle(this.props.Home)}
        </ScrollView>
      );
  }
}

как показать Activity Indiactor, пока мои данные из firebase не были получены

Answer 1

Вы можете использовать переменную загрузки в состоянии. Вы установили значение false перед командой извлечения, после чего установите значение true. Вы можете увидеть ниже образец.

constructor(props) {
    super(props);

    this.state = {
      loading: false
    };
  }

componentDidMount = () => {
this.setState({
    loading: true
})
this.props.dispatch(getHome()).then(response=>{
    this.setState({
        loading: false
    })
})
}

render() {
      return (
        <ScrollView}>            
          {this.state.loading == false ? (
          <View>
            {this.renderArticle(this.props.Home)}
          </View>
        ) : (
          <ActivityIndicator size="large" />
        )}
        </ScrollView>
      );
  }