React redux api 每 x 秒轮询一次

使用React和Redux进行应用程序开发时，有时我们需要定期轮询某个接口以更新数据。这种情况下，我们可以使用Redux的中间件来实现定时轮询功能。本文将介绍如何使用React和Redux API来每隔一定时间轮询一次接口，并提供一个案例代码。

npm install redux react-redux

javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

javascript
const pollingMiddleware = store => next => action => {
  if (action.type === 'START_POLLING') {
    const intervalId = setInterval(() => {
      store.dispatch({ type: 'FETCH_DATA' });
    }, action.payload.interval);
    // 将intervalId存储在store中，以便稍后停止轮询
    store.dispatch({ type: 'SET_INTERVAL_ID', payload: intervalId });
  }
  if (action.type === 'STOP_POLLING') {
    clearInterval(action.payload.intervalId);
  }
  return next(action);
};

javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import pollingMiddleware from './pollingMiddleware';
import rootReducer from './reducers';
const store = createStore(
  rootReducer,
  applyMiddleware(thunk, pollingMiddleware)
);

javascript
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
const PollingComponent = ({ startPolling, stopPolling }) => {
  useEffect(() => {
    // 组件挂载时开始轮询
    startPolling(5000);
    // 组件卸载时停止轮询
    return () => stopPolling();
  }, []);
  return 
轮询组件
;
};
const mapDispatchToProps = dispatch => ({
  startPolling: interval => dispatch({ type: 'START_POLLING', payload: { interval } }),
  stopPolling: () => dispatch({ type: 'STOP_POLLING' })
});
export default connect(null, mapDispatchToProps)(PollingComponent);