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

Question

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

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

关于解决此问题的任何建议？尽管我用延迟加载来包装它，但是在这种情况下似乎没有什么用。

// Actions.js

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

// component.js

class Resume extends Component{

    static propTypes = {
        getWorkexperience: PropTypes.func.isRequired,
        deleteWorkexperiences: PropTypes.func.isRequired,
        isAuthenticated: PropTypes.bool,
        auth: PropTypes.object.isRequired
    }

    componentDidMount() {
        this.props.getResume();
        this.props.getWorkexperience();
        this.props.getInstitutename();
        this.props.getSkill();
    }
    render() {
        return(
            <div>My component</div>
        )
    }
    const mapStateToProps = (state) => ({
        resume: state.resume,
        isAuthenticated : state.auth.isAuthenticated,
        auth: state.auth
    });

    export default connect(mapStateToProps, {
        getWorkexperience, deleteWorkexperiences }) (Resume);

Answer 1

处理组件表示的一种常见方法，尤其是在它是容器的情况下，是实现加载活动指示器，一旦显示数据，该指示器将消失。只要确保在您的本地状态下实现loading布尔值，并在确认数据存在后，将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>
  );

}

这是您要找的东西吗？

Answer 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;
}

您可以通过调用这种变径器的状态来渲染微调器或任何您想要的东西。

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

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

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