Slomux — упрощённая, сломанная реализация Flux. Перед вами небольшое приложение, написанное на React + Slomux. Это нерабочий секундомер с настройкой интервала обновления.
Исправьте ошибки и потенциально проблемный код, почините приложение и прокомментируйте своё решение.
При нажатии на "старт" должен запускаться секундомер и через заданный интервал времени увеличивать свое значение на значение интервала.
При нажатии на "стоп" секундомер должен останавливаться и сбрасывать свое значение.
$ git clone https://[email protected]/unmyke/stopwatch.git
$ npm install
$ npm start
$ npm build
StoreContext
- для передачи хранилища использован новый
Context API
;
Provider
- классовый компонент
Provider
заменен функциональным; - использован новый
Context API
;
createStore
- добавлена функция
unsubsсribe
для возможности отписаться от изменений в хранилище; - исправлена инициация состояния хранилища: в случае, если в функцию не передано начальное состояние хранилища, то оно устанавливается в значение начального состояния корневого редьюсера;
connect
- исправлено некорректное поведение, при котором компоненты, обернутые HOC'ом
connect
вWrappedComponent
, не обновлялись при монтировании; - добавлена отписка от обновления компонента
WrappedComponent
перед отмонтированием; - классовый компонент
WrappedComponent
заменен функциональным с использованием хуков для принудительного обновления оборачиваемых компонентов (useState
иuseEffect
) и получения хранилища состояния (useContext
);
reducer
- добавлено значение начального состояние;
- добавлен возврат текущего состояния при передаче экшна, обработка которого не предусмотрена;
- добавлена проверка при обработке экшна
CHANGE_INTERVAL
, не допускающего установки состояния (интервала времени) в отрицательное значение;
Interval
-
исправлена очередность аргументов при вызове HOC'а
connect
; -
добавлена логика UI, предотвращающая:
- установку отрицательного значения интервала (отключение кнопки декремента);
- изменение интервала при запущенном секундомере (отключение кнопок изменения интервала);
-
классовый компонент
IntervalComponent
заменен функциональным;
Timer
-
функции обработчиков кнопок "Старт" и "Стоп" заменены на стрелочные функции во избежание потери контекста;
-
в обработчике кнопки "Старт" изменено использование функции
setTimeout
наsetInterval
для предотвращения остановки секундомера по истечению временного интервалаcurrentInterval
; -
добавлено состояние компонента
сurrentIntervalId
, хранящее идентификатор интервалаsetInterval
. На основании значениясurrentIntervalId
определяется факт запуска секундомера, что дает возможность корректно выполнить отмену выполнения коллбекаsetInterval
при остановке секундомера, предотвращающая изменение состоянияcurrentTime
после остановки; -
добавлена отчистка интервала при отмонтировании компонента;
-
добавлена логика UI, предотвращающая:
- запуск секундомера повторно (отключение кнопки "Старт");
- запуск секундомера при незаданном значение интервала (отключение кнопки "Старт");
- остановка уже остановленного секундомера (отключение кнопки "Стоп");
-
классовый компонент
TimerComponent
заменен функциональным, хранение состояния UI реализовано с помощью хукаuseState
.