使用 redux 创建秒表

Question

我一直在尝试在 react 和 redux 中制作秒表。我一直无法弄清楚如何在 redux 中设计这样的东西。

首先想到的是有一个START_TIMER 操作，它将设置初始offset 值。之后，我使用setInterval 一遍又一遍地触发TICK 动作，通过使用偏移量计算已经过去了多少时间，将其添加到当前时间，然后更新offset。

这种方法似乎有效，但我不确定如何清除间隔以停止它。另外，这个设计似乎很糟糕，可能有更好的方法来做到这一点。

这是一个完整的JSFiddle，它具有START_TIMER 功能。如果你只是想看看我的减速器现在是什么样子，这里是：

const initialState = {
  isOn: false,
  time: 0
};

const timer = (state = initialState, action) => {
  switch (action.type) {
    case 'START_TIMER':
      return {
        ...state,
        isOn: true,
        offset: action.offset
      };

    case 'STOP_TIMER':
      return {
        ...state,
        isOn: false
      };

    case 'TICK':
      return {
        ...state,
        time: state.time + (action.time - state.offset),
        offset: action.time
      };

    default: 
      return state;
  }
}

非常感谢任何帮助。

Answer 1

我可能会建议以不同的方式进行此操作：仅存储计算存储中经过时间所需的状态，并让组件设置其自己的间隔，以适应它们希望更新显示的频率。

这将动作调度保持在最低限度——只调度启动和停止（和重置）计时器的动作。请记住，每次调度一个动作时，您都会返回一个新的状态对象，然后每个 connected 组件都会重新渲染（即使它们使用优化来避免在包装的组件）。此外，由于您必须处理所有 TICKs 以及其他操作，因此许多操作分派可能会使调试应用程序状态更改变得困难。

这是一个例子：

// Action Creators

function startTimer(baseTime = 0) {
  return {
    type: "START_TIMER",
    baseTime: baseTime,
    now: new Date().getTime()
  };
}

function stopTimer() {
  return {
    type: "STOP_TIMER",
    now: new Date().getTime()
  };
}

function resetTimer() {
  return {
    type: "RESET_TIMER",
    now: new Date().getTime()
  }
}


// Reducer / Store

const initialState = {
  startedAt: undefined,
  stoppedAt: undefined,
  baseTime: undefined
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "RESET_TIMER":
      return {
        ...state,
        baseTime: 0,
        startedAt: state.startedAt ? action.now : undefined,
        stoppedAt: state.stoppedAt ? action.now : undefined
      };
    case "START_TIMER":
      return {
        ...state,
        baseTime: action.baseTime,
        startedAt: action.now,
        stoppedAt: undefined
      };
    case "STOP_TIMER":
      return {
        ...state,
        stoppedAt: action.now
      }
    default:
      return state;
  }
}

const store = createStore(reducer);

请注意，动作创建者和缩减程序仅处理原始值，不使用任何类型的间隔或 TICK 动作类型。现在组件可以轻松订阅这些数据并根据需要随时更新：

// Helper function that takes store state
// and returns the current elapsed time
function getElapsedTime(baseTime, startedAt, stoppedAt = new Date().getTime()) {
  if (!startedAt) {
    return 0;
  } else {
    return stoppedAt - startedAt + baseTime;
  }
}

class Timer extends React.Component {
  componentDidMount() {
    this.interval = setInterval(this.forceUpdate.bind(this), this.props.updateInterval || 33);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    const { baseTime, startedAt, stoppedAt } = this.props;
    const elapsed = getElapsedTime(baseTime, startedAt, stoppedAt);

    return (
      <div>
        <div>Time: {elapsed}</div>
        <div>
          <button onClick={() => this.props.startTimer(elapsed)}>Start</button>
          <button onClick={() => this.props.stopTimer()}>Stop</button>
          <button onClick={() => this.props.resetTimer()}>Reset</button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { baseTime, startedAt, stoppedAt } = state;
  return { baseTime, startedAt, stoppedAt };
}

Timer = ReactRedux.connect(mapStateToProps, { startTimer, stopTimer, resetTimer })(Timer);

您甚至可以以不同的更新频率在同一数据上显示多个计时器：

class Application extends React.Component {
  render() {
    return (
      <div>
        <Timer updateInterval={33} />
        <Timer updateInterval={1000} />
      </div>
    );
  }
}

您可以在此处看到带有此实现的working JSBin：https://jsbin.com/dupeji/12/edit?js,output

Answer 2

如果您要在更大的应用程序中使用它，那么我会使用 requestAnimationFrame 而不是 setInterval 来解决性能问题。当您显示毫秒时，您会在移动设备上注意到这一点，而不是在桌面浏览器上。

更新的 JSFiddle

https://jsfiddle.net/andykenward/9y1jjsuz

Answer 3

您想使用clearInterval 函数，该函数获取对setInterval（唯一标识符）的调用结果，并停止该间隔继续执行。

因此，与其在start() 中声明setInterval，不如将​​其传递给reducer，以便它可以将其ID 存储在状态中：

将interval 作为操作对象的成员传递给调度程序

start() {
  const interval = setInterval(() => {
    store.dispatch({
      type: 'TICK',
      time: Date.now()
    });
  });

  store.dispatch({
    type: 'START_TIMER',
    offset: Date.now(),
    interval
  });
}

将interval 存储在START_TIMER action reducer 中的新状态

case 'START_TIMER':
  return {
    ...state,
    isOn: true,
    offset: action.offset,
    interval: action.interval
  };

______

根据interval渲染组件

传入interval作为组件的属性：

const render = () => {
  ReactDOM.render(
    <Timer 
      time={store.getState().time}
      isOn={store.getState().isOn}
      interval={store.getState().interval}
    />,
    document.getElementById('app')
  );
}

然后我们可以检查out组件内的状态，根据是否有属性interval来渲染它：

render() {
  return (
    <div>
      <h1>Time: {this.format(this.props.time)}</h1>
      <button onClick={this.props.interval ? this.stop : this.start}>
        { this.props.interval ? 'Stop' : 'Start' }
      </button>
    </div>
  );
}

______

停止计时器

要停止计时器，我们使用clearInterval 清除间隔，然后再次应用initialState：

case 'STOP_TIMER':
  clearInterval(state.interval);
  return {
    ...initialState
  };

______

更新的 JSFiddle

https://jsfiddle.net/8z16xwd2/2/

Answer 4

与 andykenward 的回答类似，我会使用 requestAnimationFrame 来提高性能，因为大多数设备的帧速率仅为每秒 60 帧左右。但是，我会尽可能少地投入 Redux。如果您只需要间隔来调度事件，您可以在组件级别而不是在 Redux 中完成所有操作。请参阅 this answer 中 Dan Abramov 的评论。

下面是倒计时计时器组件的示例，它既显示倒计时时钟，又在它到期时执行某些操作。在 start、tick 或 stop 中，您可以调度需要在 Redux 中触发的事件。我只在计时器应该启动时安装这个组件。

class Timer extends Component {
  constructor(props) {
    super(props)
    // here, getTimeRemaining is a helper function that returns an 
    // object with { total, seconds, minutes, hours, days }
    this.state = { timeLeft: getTimeRemaining(props.expiresAt) }
  }

  // Wait until the component has mounted to start the animation frame
  componentDidMount() {
    this.start()
  }

  // Clean up by cancelling any animation frame previously scheduled
  componentWillUnmount() {
    this.stop()
  }

  start = () => {
    this.frameId = requestAnimationFrame(this.tick)
  }

  tick = () => {
    const timeLeft = getTimeRemaining(this.props.expiresAt)
    if (timeLeft.total <= 0) {
      this.stop()
      // dispatch any other actions to do on expiration
    } else {
      // dispatch anything that might need to be done on every tick
      this.setState(
        { timeLeft },
        () => this.frameId = requestAnimationFrame(this.tick)
      )
    }
  }

  stop = () => {
    cancelAnimationFrame(this.frameId)
  }

  render() {...}
}