[译文&摘抄]在 React & Redux 中使用 AJAX 轮询

╰半橙微兮° 2022-06-02 03:29 140阅读 0赞

原文地址：AJAX POLLING IN REACT WITH REDUX  
原文作者：Josh M  
译文出自：掘金翻译计划  
转自：[https://juejin.im/post/5a43b6da5188257d167a7aef][https_juejin.im_post_5a43b6da5188257d167a7aef]  
译者：刘嘉一  
校对者：yoyoyohamapi，FateZeros

**目标：把一些有时序依赖的状态从服务端同步到客户端**

**方式：结合 React 组件的生命周期方法、 Redux 的 Action 以及 setTimeout 函数**

**HOW：**

**reducer** 文件：

**Action** 文件

export function dataFetch() {   
      return {
        [CALL_API]: {
          types: [DATA_FETCH_BEGIN, DATA_FETCH_SUCCESS, DATA_FETCH_ERROR],
          endpoint: 'api/data/'
        }
      };
    }

如何定义组件？

import React from 'react';  
    import {connect} from 'react-redux';  
    import {bindActionCreators} from 'redux';  
    import * as DataActions from 'actions/DataActions';
    
    // 组件需要哪些 Redux 全局状态作为 props 传入？
    function mapStateToProps(state) {   
        return {
            data: state.data.data,
            isFetching: state.data.isFetching
        };
    }
    
    // 组件需要哪些 Action 创建函数作为 props 传入？
    function mapDispatchToProps(dispatch) {   
        return {
            dataActions: bindActionCreators(DataActions, dispatch)
        };
    }
    
    @connect(mapStateToProps, mapDispatchToProps)
    export default class AppContainer {   
        componentWillReceiveProps(nextProps) {
            if (this.props.data !== nextProps.data) {
    
                clearTimeout(this.timeout);
    
                // 你可以在这里处理获取到的数据
    
                if (!nextProps.isFetching) {
                    this.startPoll();
                }
            }
    
        }
    
        componentWillMount() {
            this.props.dataActions.dataFetch();
        }
    
        componentWillUnmount() {
            clearTimeout(this.timeout);
        }
    
        startPoll() {
            this.timeout = setTimeout(() => this.props.dataActions.dataFetch(), 15000);
        }
    }

[https_juejin.im_post_5a43b6da5188257d167a7aef]: https://juejin.im/post/5a43b6da5188257d167a7aef