Erstellen Sie eine Stoppuhr mit redux

Ich habe versucht, eine Stoppuhr in reagieren und redux. Ich habe Schwierigkeiten, Schwierigkeiten, herauszufinden, wie zu entwerfen, wie ein Ding in redux.

Das erste, was mir in den Sinn kam, war ein START_TIMER Aktion, die würde den ersten offset Wert. Direkt danach benutze ich setInterval Feuer aus einem TICK Aktion immer und immer wieder, dass berechnet, wie viel Zeit vergangen ist, durch Verwendung der offset Hinzugefügt, um die aktuelle Zeit und aktualisiert dann die offset.

Dieser Ansatz scheint zu funktionieren, aber ich bin mir nicht sicher, wie ich den deaktivieren Sie das Intervall, um es zu stoppen. Auch, wie es scheint, dieses design ist schlecht und es gibt wahrscheinlich einen besseren Weg, es zu tun.

Hier ist eine vollständige JSFiddle hat die START_TIMER Funktionalität arbeiten. Wenn Sie nur wollen, um zu sehen, was meine reducer aussieht wie jetzt gerade, 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 wirklich zu schätzen jede Hilfe.

InformationsquelleAutor saadq | 2016-01-03
Schreibe einen Kommentar