Redux – это инструмент для управления государством для интерфейсных приложений. Это декларативное API помогает разработчикам строить комплексные приложения очень модульными способом. Давайте оформить заказ, как мы можем построить простой таймер, используя Redux.
Установка Redux.
Сначала включим redux от CDN и добавьте его на наш index.html страница
Redux timer
Настройка магазина Redux
Теперь давайте схватим Createstore Функция от Redux и инициализируйте наш магазин. Наш магазин нуждается в функции редуктора, которая будет использоваться для генерации состояния на лету. Давайте добавим это тоже. Теперь, поскольку мы намереваемся построить таймер, достаточно хорош, если у нас просто есть номер как наша государственная стоимость и продолжайте увеличивать его с действиями. Мы поставим весь наш JavaScript в main.js Отказ
const { createStore } = Redux;
const store = createStore(counterReducer);
function counterReducer(state, action){
// initially state is undefined, so let's return 0 when the
// store is first created
if(typeof state === 'undefined'){
return 0;
};
// when this actions is dispatched, increment state
if(action.type === 'INCREMENT_TIMER'){
return state + 1;
}
return state;
}
Теперь наш магазин готов!
Отправляйтесь!
Теперь, когда наш магазин все проводно, давайте выстрелить наше действие.
const { createStore } = Redux;
const store = createStore(counterReducer);
function counterReducer(state, action){
if(typeof state === 'undefined'){
return 0;
};
if(action.type === 'INCREMENT_TIMER'){
return state + 1;
}
return state;
}
console.log('increment timer')
store.dispatch({
type : 'INCREMENT_TIMER'
})
Сейчас это будет огонь только один раз. Давайте обернуть его в Setinterval и сделать его выполнять один раз в секунду. Наш код становится:
const { createStore } = Redux;
const store = createStore(counterReducer);
function counterReducer(state, action){
if(typeof state === 'undefined'){
return 0;
};
if(action.type === 'INCREMENT_TIMER'){
return state + 1;
}
return state;
}
setInterval( function() {
console.log('increment timer')
store.dispatch({
type : 'INCREMENT_TIMER'
})
}, 1000 )
Обновление просмотра
Если мы посмотрим на index.html Страница, у нас есть «таймер P #», чтобы показать значение таймера. Давайте напишем простой скрипт для обновления таймера, когда состояние нашего приложения меняется. Мы можем сделать это, используя store.subscribe Функция, которая уволена каждый раз, когда значение состояния в Redux меняется.
store.subscribe( function() {
document.getElementById("timer").innerHTML = store.getState()
})
Это все, что нам нужно. Наше main.js Файл должен теперь выглядеть так.
const { createStore } = Redux;
const store = createStore(counterReducer);
function counterReducer(state, action){
if(typeof state === 'undefined'){
return 0;
};
if(action.type === 'INCREMENT_TIMER'){
return state + 1;
}
return state;
}
setInterval( function() {
console.log('increment timer')
store.dispatch({
type : 'INCREMENT_TIMER'
})
}, 1000 )
store.subscribe( function() {
document.getElementById("timer").innerHTML = store.getState()
})
Вы должны уметь видеть, как представление обновляется каждый раз, когда таймер увеличивается сейчас.
Форматирование вида
Последняя часть этого приложения состоит в том, чтобы отформатировать представление, чтобы показать секунды, минуты и часы, а не огромное количество, как 115. Давайте подключимся к логике в:
store.subscribe( function() {
const totalSecondsPassed = store.getState(),
totalMinutesPassed = Math.floor(totalSecondsPassed/60),
hours = Math.floor(totalMinutesPassed/60),
minutes = totalMinutesPassed % 60,
seconds = totalSecondsPassed % 60;
document.getElementById("timer").innerHTML = `${hours} hours ${minutes} minutes ${seconds} seconds`
})
Там мы идем, у нас теперь есть наш первый приложение Timer redux.
Проверьте демонстрацию здесь Отказ
Если у вас есть какие-либо вопросы или комментарии, дайте мне знать!