如何解决React redux中的数据加载问题

我试图弄清楚当数据仍在加载时如何管理/显示此组件。

我在这种情况下使用react redux。

有什么解决这个问题的建议吗？

虽然我用延迟加载来包装它，但在这种情况下似乎并没有那么有效。

对此有何建议。

//动作.js

export const getContact= () => dispatch => {
    dispatch(setResumesLoading());
    axios
        .get('/api/contacts')
        .then(res => 
            dispatch({
                type: GET_CONTACTS,
                payload: res.data
            })
        ).catch (err => dispatch (returnErrors(err.response.data, err.response.status)));
};

//组件.js

import React, {Component} from 'react';
import {Grid, Cell, List, ListItem, ListItemContent, Button} from 'react-mdl';
import { connect } from 'react-redux';
import { getContact, deleteContact} from '../../actions/resumeActions';
import PropTypes from 'prop-types';

class Contact extends Component{

    static propTypes = {
        getContact: PropTypes.func.isRequired,
        deleteContact: PropTypes.func.isRequired,
        resume: PropTypes.object.isRequired,
        isAuthenticated: PropTypes.bool,
        auth: PropTypes.object.isRequired
    }

    componentDidMount() {
        this.props.getContact();
    }

    onDeleteContactClick = (id) => {
        this.props.deleteContact(id);
    };

    render(){
        const { contacts } = this.props.resume;
        const { user } = this.props.auth;

        return(
            <div>
                {/* {loading ? <Loading /> : <ResultsComponent results={data} />} */}
                 {contacts.map(({ _id, contact_name, contact_phone, contact_email, contact_skype, contact_image }) => (
            <Grid key={_id} timeout={100} classNames="fade">

               { this.props.isAuthenticated && (user.is_admin === true) ? 
                            <Button className="remove-btn"
                            color="danger"
                            size="sm"
                            onClick= {this.onDeleteContactClick.bind(this, _id)}>
                                &times;
                            </Button> : null }
                    <Cell col={6}>
                        <div style={{textAlign: 'center'}}>
                            <h2> {contact_name} </h2>
                            <img src={contact_image}
                            alt="avatar"
                            style={{height: '40%', borderRadius: '50%', width: '50%'}}
                            img-rounded />
                        </div>

                    </Cell>
                    <Cell col={6} className="contact-right-col text-center">

                        <h2 >Contact Me</h2>
                        <hr  className="resume-left-contact-section-border" />

                        <List>
                          <ListItem>
                            <ListItemContent  className="contact-list-item">
                                <i className="fa fa-phone-square" aria-hidden="true"/>
                                {contact_phone}
                            </ListItemContent>
                          </ListItem>
                        </List>

                    </Cell>
            </Grid>
            ))} 
            </div>


        )
    }
}



const mapStateToProps = (state) => ({
    resume: state.resume,
    isAuthenticated : state.auth.isAuthenticated,
    auth: state.auth
});

export default connect(mapStateToProps, {getContact, deleteContact }) (Contact);

那么，您可以在现有的操作列表中添加另外两个操作。一种用于获取 API 调用开始的状态，另一种用于获取任何错误。有点像这样：

import * as types from "./actionTypes";

export function beginApiCall() {
  return { type: types.BEGIN_API_CALL };
}

export function apiCallError() {
  return { type: types.API_CALL_ERROR };
}

然后，您可以通过在正确的时间调度这些操作来利用它们。

export const getWorkexperience = () => dispatch => {
    dispatch(beginApiCall());
    axios
        .get('/api/workexperiences')
        .then(res => 
            dispatch({
                type: GET_WORKEXPERIENCE,
                payload: res.data
            })
        ).catch (err => dispatch(apiCallError(error)););
};

然后您必须为此操作创建一个新的减速器。为此编写一个减速器有点棘手。您需要存储正在进行的 API 调用数量，并根据其状态增加或减少它们。为此，您可以附加_SUCCESS到所有动作创建器和减速器中现有的动作类型。

import * as types from "../actions/actionTypes";
import initialState from "./initialState";

function actionTypeEndsInSuccess(type) {
  return type.substring(type.length - 8) === "_SUCCESS";
}

export default function apiCallStatusReducer(
  state = initialState.apiCallsInProgress,
  action
) {
  if (action.type == types.BEGIN_API_CALL) {
    return state + 1;
  } else if (
    action.type === types.API_CALL_ERROR ||
    actionTypeEndsInSuccess(action.type)
  ) {
    return state - 1;
  }

  return state;
}

  //initialState.js
    export default {
      state1: [],
      state2: [],
      apiCallsInProgress: 0
    };

一旦进入组件，在发出获取请求后，您可以使用此减速器的状态来渲染旋转器或任何您想要的东西，只需从减速器中获取它即可。

  const loading = useSelector((state) => state.apiCallsInProgress > 0);

或者您可以通过以下方式访问它mapStateToProps像这样，我看到你已经用它来获取组件中的道具。

const mapStateToProps = (state) => ({
    resume: state.resume,
    isAuthenticated : state.auth.isAuthenticated,
    auth: state.auth,
    loading: state.apiCallsInProgress > 0
});

你可以像这样返回函数的内容。

 {loading ? (
       Loading...
      ) : (
        <div>My component</div>
)}