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

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

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

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

HOW：

reducer 文件：

const initialState = {  
    data: {},isFetching: false // 通过这个键值，判断是否正在获取数据
};

export function data (state = initialState,action) {  
    switch (action.type) {
    case DATA_FETCH_BEGIN: {
        return { ...state,isFetching: true };
    }
    case DATA_FETCH_SUCCESS: {
        return { isFetching: false,data: { ...state.data,action.payload }};
    }
    case DATA_FETCH_ERROR: {
        return { ...state,isFetching: false };
    }
    default:
        return state;
}

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