Я работаю над приложением, где я хочу, чтобы таймер обратного отсчета от, скажем, от 60 секунд до 0, а затем менял какой-то контент, после чего таймер снова запускается на 60.
Я реализовал это в React и Flux, но поскольку я новичок в этом, у меня все еще возникают проблемы.
Теперь я хочу добавить кнопку запуска/остановки для таймера. Я не уверен, где поставить/обработать состояние таймера.
У меня есть компонент Timer.jsx, который выглядит так:
var React = require('react');
var AppStore = require('../stores/app-store.js');
var AppActions = require('../actions/app-actions.js');
function getTimeLeft() {
return {
timeLeft: AppStore.getTimeLeft()
}
}
var Timer = React.createClass({
_tick: function() {
this.setState({ timeLeft: this.state.timeLeft - 1 });
if (this.state.timeLeft < 0) {
AppActions.changePattern();
clearInterval(this.interval);
}
},
_onChange: function() {
this.setState(getTimeLeft());
this.interval = setInterval(this._tick, 1000);
},
getInitialState: function() {
return getTimeLeft();
},
componentWillMount: function() {
AppStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
componentDidMount: function() {
this.interval = setInterval(this._tick, 1000);
},
render: function() {
return (
<small>
({ this.state.timeLeft })
</small>
)
}
});
module.exports = Timer;
Он извлекает длительность обратного отсчета из хранилища, где у меня просто есть:
var _timeLeft = 60;
Теперь, когда я хочу реализовать кнопку запуска/остановки, мне кажется, что я должен также реализовать это через Flux Actions, правильно? Поэтому я думал о том, что в моем магазине есть что-то подобное:
dispatcherIndex: AppDispatcher.register(function(payload) {
var action = payload.action;
switch(action.actionType) {
case AppConstants.START_TIMER:
// do something
break;
case AppConstants.STOP_TIMER:
// do something
break;
case AppConstants.CHANGE_PATTERN:
_setPattern();
break;
}
AppStore.emitChange();
return true;
})
Однако, поскольку мой компонент Timer в настоящее время обрабатывает setInterval, я не знаю, как работать с моими START/STOP_TIMER событиями. Должен ли я перемещать материал SetInterval из компонента Timer в Store и каким-то образом передавать его на мой компонент?
Полный код можно найти здесь.
