Redux操作中的轮询

const startPolling = () => ({
  type: 'START_POLLING',
});

const stopPolling = () => ({
  type: 'STOP_POLLING',
});

const initialState = {
  isPolling: false,
};

const pollingReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'START_POLLING':
      return {
        ...state,
        isPolling: true,
      };
    case 'STOP_POLLING':
      return {
        ...state,
        isPolling: false,
      };
    default:
      return state;
  }
};

import { createStore, combineReducers } from 'redux';

const rootReducer = combineReducers({
  polling: pollingReducer,
  // 其他reducer...
});

const store = createStore(rootReducer);

import { useDispatch, useSelector } from 'react-redux';
import { startPolling, stopPolling } from './actions';

const PollingComponent = () => {
  const dispatch = useDispatch();
  const isPolling = useSelector(state => state.polling.isPolling);

  useEffect(() => {
    const timer = setInterval(() => {
      // 发送轮询请求的异步操作
      dispatch(fetchData());
    }, 5000); // 每5秒发送一次请求

    return () => {
      clearInterval(timer);
    };
  }, [dispatch]);

  const handleStartPolling = () => {
    dispatch(startPolling());
  };

  const handleStopPolling = () => {
    dispatch(stopPolling());
  };

  return (
    <div>
      <button onClick={handleStartPolling}>开始轮询</button>
      <button onClick={handleStopPolling}>停止轮询</button>
      <p>轮询状态: {isPolling ? '正在轮询' : '未开始轮询'}</p>
      {/* 其他UI组件... */}
    </div>
  );
};