使用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组件都会重新渲染（即使它们使用优化来避免在封装的组件内部进行过多的重新渲染）。此外，由于您必须与所有TICK其他动作一起处理所有操作，因此许多动作分派可能使调试应用程序状态更改变得困难。

这是一个例子：

// 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>
    );
  }
}

您可以在此处查看具有此实现的 有效JSBin： https

//jsbin.com/dupeji/12/edit?js
,
output