class 的 Redux 状态管理

Question

我有一个计时器 class，它允许我在 JS 中 Pause/Restart 一个 setInterval:

export class Timer {
  constructor(callback, delay) {
    this.callback = callback
    this.delay = delay
    this.remaining = delay
    this.start = undefined
    this.timerId = undefined
  }
  pause() {
    window.clearTimeout(this.timerId)
    this.pauseTime = new Date().getTime()
    this.remaining -= new Date() - this.start
  }
  resume() {
    this.start = new Date().getTime()
    window.clearTimeout(this.timerId)
    this.timerId = window.setTimeout(this.callback, this.remaining)
  }
  quit() {
    window.clearTimeout(this.timerId)
  }
}

我的（绑定）Redux Action Creators 如下：

export const boundPomodoroStartFinish = () => {
  let id = new Date().getTime()
  let pomodoroTime = 1000
  let timer = new Timer(() => {
    let pomodoro = store.getState().pomodoro
    let time = new Date().getTime()
    store.dispatch(pomodoroFinish(pomodoro, time))
  }, pomodoroTime)
  timer.resume()
  store.dispatch(pomodoroStart(id, timer))
}

export const boundPomodoroPause = () => {
  let pomodoro = store.getState().pomodoro
  let time = new Date().getTime()
  pomodoro.timer.pause()
  store.dispatch(pomodoroPause(time))
}

export const boundPomodoroQuit = () => {
  let pomodoro = store.getState().pomodoro
  let time = new Date().getTime()
  pomodoro.timer.quit()
  store.dispatch(pomodoroQuit(pomodoro, time))
}

export const boundPomodoroResume = () => {
  let pomodoro = store.getState().pomodoro
  pomodoro.timer.resume()
  store.dispatch(pomodoroResume())
}

感觉我不应该在绑定的 Action Creator 中调用 pomodoro.timer.x()，而应该将番茄钟发送到 reducer 并让 reducer 调用 action。

或者，我可以完全摆脱 class 并将整个 setInterval 时间管理放入 store 并且让 reducer 始终在那里计算它并且只在那里（之后调用适当的操作）- 但这似乎比必要的更复杂。

什么是正确的 Redux 做事方式？谢谢！

Answer 1

这也是新手，但我认为您应该考虑为此创建一个 Redux 中间件。

http://redux.js.org/docs/advanced/Middleware.html

其中一个示例使用了 clearTimeout。

class 的 Redux 状态管理

Redux state management with class

javascript

timer

ecmascript-6

redux