IT技术 - 如何解决 React redux 中的数据加载问题 - 吾爱随笔录

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

IT技术 reactjs redux lazy-loading

2021-05-15 04:41:14

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

对于这种情况，我正在使用 react redux。

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

虽然我用延迟加载包装了它，但在这种情况下似乎没有那么多工作。

对此有任何建议。

//Actions.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);

2个回答

好吧，您可以在现有的操作列表中再添加两个操作。一个用于获取 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像这样访问它，我看到你已经用它来获取组件中的props。

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

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

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

处理组件呈现的常用方法之一，特别是如果它是一个容器，是实现加载活动指示器，一旦你有数据要显示，它就会消失。只需确保loading在您的本地状态中实现boolean ，一旦您确认数据存在，请更改loading为false.

async componentWillMount() {
  await getWorkexperience();
  this.setState({
     loading: false,
  });
}

...

render() {
  const { data, loading } = this.state;

  return (
    <div>
      {/*
        Check the status of the 'loading' variable. If true, then display
        the loading spinner. Otherwise, display the data.
      */}
      {loading ? <LoadingSpinner /> : <ResultsComponent results={data} />}
    </div>
  );

}

这是您要找的东西吗？

在现成的解决方案中，有一些可以立即使用的软件包：

其它你可能感兴趣的问题

上一篇如何正确打印带支架的对象下一篇如何使用 React-Router 和 Express 后端返回有效的 JSON 响应？