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.