如何在 API 使用 redux 获取数据之前显示 Loader？答案

【问题标题】：how to show Loader till API get data using redux?如何在 API 使用 redux 获取数据之前显示 Loader？
【发布时间】：2020-02-27 18:01:40
【问题描述】：

我是 react 和 redux 的新手。我已经使用 redux 实现了 API 获取，但如果没有网络或 API 出现故障，我不确定应该将代码放在哪里，直到 API 提供数据和错误消息。一切正常我也在获取数据。我唯一坚持的是如何显示活动指示器和错误消息。有没有办法做到这一点？在此先感谢:)

reducer.js

export const GET_REPOS = 'my-awesome-app/repos/LOAD';
export const GET_REPOS_SUCCESS = 'my-awesome-app/repos/LOAD_SUCCESS';
export const GET_REPOS_FAIL = 'my-awesome-app/repos/LOAD_FAIL';


const initialState = {
  repos: [],
  loading: false,
  error: null
};


export default function reducer(state = initialState , action) {
  switch (action.type) {
    case GET_REPOS:
      return { ...state, loading: true };
    case GET_REPOS_SUCCESS:
      return { ...state, loading: false, repos: action.payload.data };
    case GET_REPOS_FAIL:
      return {
        ...state,
        loading: false,
        error: 'Error while fetching repositories',
      };
    default:
      return state;
  }
}

export function listRepos(photos) {
  return {
    type: GET_REPOS,
    payload: {
      request: {
        url: `photos/`
      }
    }
  };
}

export function listThumb(albumId) {
  return {
    type: GET_REPOS,
    payload: {
      request: {
        url: `photos?albumId=${albumId}`
      }
    }
  };
}

home.js

import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native-paper';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import styles from '../HomeComponent/style';
import { Ionicons } from '@expo/vector-icons';
import { listRepos } from '../../../reducer';

class Home extends Component {
  componentDidMount() {
    this.props.dispatch(fetchProducts());
    this.props.listRepos('');
  }

  FlatListItemSeparator = () => (
    <View style={styles.flatListItemSeparator} />
  )

  renderItem = ({ item }) => (

    <View style={styles.listRowContainer}>

      <TouchableOpacity onPress={() => this.props.navigation.navigate('ThumbnailViewScreen', {
        albumID: item.id,
      })} style={styles.listRow}>
        <View style={styles.listTextNavVIew}>
          <Text style={styles.albumTitle}> {item.title} </Text>
          <Ionicons name='md-arrow-dropright' style={styles.detailArrow} />
        </View>
      </TouchableOpacity>

    </View>
  );
  render() {
    const { error, loading, products } = this.props;

    if (error) {
      return <Text>adadf </Text>;
    }


    if (loading) {
      return (
        <View style={{ flex: 1, paddingTop: 30 }}>
            <ActivityIndicator animating={true} size='large' />
        </View>
      );
    }
    const { repos } = this.props;
    return (
      <View style={styles.MainContainer} >
        <FlatList
          styles={styles.container}
          data={repos}
          renderItem={this.renderItem}
          ItemSeparatorComponent={this.FlatListItemSeparator}

        />
      </View>
    );
  }
}

const mapStateToProps = state => {
  let storedRepositories = state.repos.map(repo => ({ key: repo.id, ...repo }));
  return {
    repos: storedRepositories
  };
};

const mapDispatchToProps = {
  listRepos
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

【问题讨论】：

您已经在使用 if 语句进行条件渲染...看起来不错是代码不起作用吗？
@baileyhaldwin 感谢您的回复..那东西不工作:(我想显示指标，直到我得到数据..但不知道如何在 home.js 中获得该条件以及如何显示在哪里显示活动指示器
我认为您在 mapStateToProps 中缺少加载道具。你能检查一下你的loading变量是否是undefined吗？
将{ repos: storedRepositories } 更改为{ repos: storedRepositories, loading: state.loading }
@stackoverflow-newbie 感谢您的帮助 :) 工作

标签： react-native react-redux axios

【解决方案1】：

const mapStateToProps = state => {
  let storedRepositories = state.repos.map(repo => ({ key: repo.id, ...repo }));
  return {
    repos: storedRepositories
  };
};

loading 可能没有作为道具传递给Home。为了解决这个问题，添加到mapStateToProps:

  return {
    repos: storedRepositories,
    loading: state.loading
  };

【讨论】：