Erstellen einer Stoppuhr mit Redux

Ich habe versucht, eine Stoppuhr zum Reagieren und Reduxieren zu bringen. Ich habe Probleme damit, herauszufinden, wie man so etwas in Redux entwirft.

Das erste, was mir in den Sinn kam, war einSTART_TIMER Aktion, die das anfängliche @ setzen würoffset Wert. Gleich danach benutze ichsetInterval ein @ abfeueTICK Aktion, die immer wieder berechnet, wie viel Zeit mit dem Offset vergangen ist, diese zur aktuellen Zeit hinzufügt und dann das @ aktualisieroffset.

Dieser Ansatz scheint zu funktionieren, aber ich bin nicht sicher, wie ich das Intervall löschen würde, um es zu stoppen. Außerdem scheint dieses Design schlecht zu sein und es gibt wahrscheinlich einen besseren Weg, dies zu tun.

Hier ist ein volles JSFiddle das hat dasSTART_TIMER Funktionalität funktioniert. Wenn Sie nur sehen möchten, wie mein Untersetzungsgetriebe im Moment aussieht, hier ist es:

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

Ich würde mich wirklich über jede Hilfe freuen.

Antworten auf die Frage(8)

Ihre Antwort auf die Frage