React-Redux中的倒计时计时器功能

// actions.js
const startTimer = () => ({
  type: 'START_TIMER'
});

const stopTimer = () => ({
  type: 'STOP_TIMER'
});

// reducers.js
const initialState = {
  startTime: 0,
  currentTime: 0,
  isRunning: false
};

const timerReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'START_TIMER':
      return {
        ...state,
        startTime: Date.now(),
        isRunning: true
      };
    case 'STOP_TIMER':
      return {
        ...state,
        isRunning: false
      };
    default:
      return state;
  }
};

// TimerComponent.jsx
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { startTimer, stopTimer } from './actions';

const TimerComponent = ({ startTime, currentTime, isRunning, startTimer, stopTimer }) => {
  useEffect(() => {
    if (isRunning) {
      const interval = setInterval(() => {
        // 更新currentTime
      }, 1000);
      return () => clearInterval(interval);
    }
  }, [isRunning]);

  const handleStart = () => {
    startTimer();
  };

  const handleStop = () => {
    stopTimer();
  };

  return (
    <div>
      <p>Start Time: {startTime}</p>
      <p>Current Time: {currentTime}</p>
      {isRunning ? (
        <button onClick={handleStop}>Stop</button>
      ) : (
        <button onClick={handleStart}>Start</button>
      )}
    </div>
  );
};

const mapStateToProps = state => ({
  startTime: state.startTime,
  currentTime: state.currentTime,
  isRunning: state.isRunning
});

const mapDispatchToProps = {
  startTimer,
  stopTimer
};

export default connect(mapStateToProps, mapDispatchToProps)(TimerComponent);