Question

我正在开发React + Redux单页面应用程序。我在页面中有一个包含文档的表格，我需要每隔20秒刷新数据。 javascript中有两个函数： setTimeout 和 setInterval 。我想我不能使用 setInterval ，因为它只是在一段时间后调用函数。在我的情况下，我需要调用函数并等待响应（后端的请求处理需要一些时间）。所以我使用了 setTimeout 并编写了这个组件（现在已经简化了）：

import {connect} from 'react-redux';

const { DATA_REFRESH_TIMEOUT, RETRY_REFRESH_TIMEOUT } = __ENVIRONMENT_CONFIG__;

@connect(
    (state) => ({
        documents: state.documents.documents,
        loadingDocuments: state.documents.loading
    }),
    (dispatch) => bindActionCreators(
        {
            dispatchLoadDocuments: loadDocuments
        },
        dispatch
    )
)

export default class Dashboard extends Component {

    documentasTimeoutId;

    constructor(props) {
        super(props);

        this.state = {
            documentType: null
        };
    }
    ....

    handleDocumentTypeChange = (event, documentType) => {
        //If document type was changed I must to abort current timer
        //and get documents with particular type immediately
        this.setState({documentType: documentType});
        this.clearTimeoutAndGetDocuments(documentType);
    };

    getDocuments = (documentType) => {
        //Here I am checking for document loading phase
        //If it is loading, we will wait and repeat loading after short time 
        const{ loadingDocuments } = this.props;
        if(!loadingDocuments) {
            this.props.dispatchLoadDocuments(documentType);
        } else {
            this.documentasTimeoutId = setTimeout(() => { this.getDocuments(documentType); }, RETRY_REFRESH_TIMEOUT);
        }
    };

    clearTimeoutAndGetDocuments = (documentType) => {
        //Abort delayed data getting and get data immediately
        clearTimeout(this.documentasTimeoutId);
        this.getDocuments(documentType);
    };

    componentDidMount(){
        //Load documents on start up
        this.props.dispatchLoadDocuments();
    }

    componentWillReceiveProps(newProps) {
        //Here I trying to get event when documents loaded
        let areDocumentsJustLoaded = this.props.loadingDocuments &&  !newProps.loadingDocuments;
        if(areDocumentsJustLoaded) {
            //If they loaded, I am setting timeout to refresh documents after some time
            this.documentasTimeoutId = setTimeout(() => { this.getOutstandingFailures(this.state.search); }, DATA_REFRESH_TIMEOUT);
        }
    }

    render() {
        const {columns, documents} = this.props;

        return (
            //.....
            <DataTable
                columns={columns}
                source={documents}
                title="Documents"
                name="documents"
                emptyMessage="No data"/>
            //....
        );
    }
}

正如您所看到我从reducer获取文档和 loadingDocuments 。我将文档添加到我的DataTable中，并通过 loadingDocuments 更改，我可以在数据加载完成时进行定义。

它正在工作，但我不确定正确的反应和redux使用（我是React / Redux中的新手）。也许有更好的方法来做同样的行动？也许我们可以以某种方式为此目的创建一个单独的组件并在其他页面中重用它？

如何在React + Redux应用程序中重复从服务器获取数据？

0 个答案: