Автор оригинала: Yazeed Bzadough.
90% Конвенция, 10% библиотека.
Redux является одним из самых важных библиотек JavaScript, когда-либо созданных. Вдохновленный предшествующим искусством, как Flux и Elm Redux поставил функциональное программирование JavaScript на карте, представляя масштабируемую архитектуру трех простых точек.
Если вы новичок в redux, рассмотрите возможность чтения Официальные документы первый.
Redux – в основном Конвенция
Рассмотрим это простое счетное приложение, которое использует архитектуру Redux. Если вы хотите прыгнуть, проверьте Github Repo для этого.
Государство живет в одном дереве
Государство приложения выглядит так.
const initialState = { count: 0 };
Действия объявляют государственные изменения
Редукс Конвенция, Я не напрямую модифицируйте (мутировать) состояние.
// DON'T do this in a Redux app state.count = 1;
Вместо этого я создаю все действия, которые пользователь может использовать преимущество в приложении.
const actions = {
increment: { type: 'INCREMENT' },
decrement: { type: 'DECREMENT' }
};
Редуктор интерпретирует действие и обновления
Последний архитектурный кусок требует редуктора, чистой функции, которая возвращает новую копию вашего штата на основе предыдущего состояния и действий.
- Если
увеличениеУволен, приращениеState.countОтказ - Если
уменьшениеуволен, уменьшениеState.countОтказ
const countReducer = (state = initialState, action) => {
switch (action.type) {
case actions.increment.type:
return {
count: state.count + 1
};
case actions.decrement.type:
return {
count: state.count - 1
};
default:
return state;
}
};
Нет redux до сих пор
Вы заметили, что мы еще не коснулись библиотеки Redux? Мы только что создали некоторые объекты и функцию. Это то, что я имею в виду под «в основном Конвенция», 90% Redux не требуют Redux!
Давайте реализуем Redux
Чтобы использовать эту архитектуру использовать, мы должны подключить его в магазин. Мы реализуем только одну функцию- Createstore Отказ
Это используется так.
import { createStore } from 'redux'
const store = createStore(countReducer);
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch(actions.increment);
// logs { count: 1 }
store.dispatch(actions.increment);
// logs { count: 2 }
store.dispatch(actions.decrement);
// logs { count: 1 }
И вот наша исходная котельная. Нам понадобится список слушателей и начальное состояние, предоставленное редуктором.
const createStore = (yourReducer) => {
let listeners = [];
let currentState = yourReducer(undefined, {});
}
Всякий раз, когда кто-то подписывается в наш магазин, они добавляются в слушатели множество. Важно, потому что каждый раз, когда кто-то отправляет действие, все слушатели должен быть уведомлен в цикле.
Призыв Yourducer с undefined и пустой объект возвращает начальное состояние Мы установили выше. Это дает нам правильное значение для возврата, когда мы называем Store.GetState () Отказ Говоря о которых давайте создадим этот метод.
Store.getState ()
Это функция, которая возвращает последнее состояние из магазина. Нам понадобится это обновить наше UI каждый раз, когда пользователь нажимает кнопку.
const createStore = (yourReducer) => {
let listeners = [];
let currentState = yourReducer(undefined, {});
return {
getState: () => currentState
};
}
store.dispatch (действие)
Это функция, которая берет Действие как параметр. Кормит, что действие и CurrentState к Yourducer Чтобы получить Новый штат. Тогда Отправка уведомляет всех подписанных на магазин Отказ
const createStore = (yourReducer) => {
let listeners = [];
let currentState = yourReducer(undefined, {});
return {
getState: () => currentState,
dispatch: (action) => {
currentState = yourReducer(currentState, action);
listeners.forEach((listener) => {
listener();
});
}
};
};
store.subscribe (слушатель)
Это функция, которая позволяет вам уведомлять, когда магазин получает действие, это хорошо использовать Store.GetState () Здесь, чтобы получить последнее состояние и обновить свой интерфейс.
const createStore = (yourReducer) => {
let listeners = [];
let currentState = yourReducer(undefined, {});
return {
getState: () => currentState,
dispatch: (action) => {
currentState = yourReducer(currentState, action);
listeners.forEach((listener) => {
listener();
});
},
subscribe: (newListener) => {
listeners.push(newListener);
const unsubscribe = () => {
listeners = listeners.filter((l) => l !== newListener);
};
return unsubscribe;
}
};
};
Подписаться Возвращает функцию под названием Отписаться Что вы можете позвонить, когда вы больше не заинтересованы в прослушивании обновлений магазина.
Все вместе сейчас
Давайте подключимся к нашим кнопкам и просмотрите окончательный исходный код.
// simplified createStore function
const createStore = (yourReducer) => {
let listeners = [];
let currentState = yourReducer(undefined, {});
return {
getState: () => currentState,
dispatch: (action) => {
currentState = yourReducer(currentState, action);
listeners.forEach((listener) => {
listener();
});
},
subscribe: (newListener) => {
listeners.push(newListener);
const unsubscribe = () => {
listeners = listeners.filter((l) => l !== newListener);
};
return unsubscribe;
}
};
};
// Redux architecture pieces
const initialState = { count: 0 };
const actions = {
increment: { type: 'INCREMENT' },
decrement: { type: 'DECREMENT' }
};
const countReducer = (state = initialState, action) => {
switch (action.type) {
case actions.increment.type:
return {
count: state.count + 1
};
case actions.decrement.type:
return {
count: state.count - 1
};
default:
return state;
}
};
const store = createStore(countReducer);
// DOM elements
const incrementButton = document.querySelector('.increment');
const decrementButton = document.querySelector('.decrement');
// Wire click events to actions
incrementButton.addEventListener('click', () => {
store.dispatch(actions.increment);
});
decrementButton.addEventListener('click', () => {
store.dispatch(actions.decrement);
});
// Initialize UI display
const counterDisplay = document.querySelector('h1');
counterDisplay.innerHTML = parseInt(initialState.count);
// Update UI when an action fires
store.subscribe(() => {
const state = store.getState();
counterDisplay.innerHTML = parseInt(state.count);
});
И еще раз вот наш финальный интерфейс.
Если вы заинтересованы в HTML/CSS, которые я использовал, вот Github Repo опять таки!
Хотите бесплатную коучинг?
Если вы хотите запланировать бесплатный звонок для обсуждения вопросов для работы в интерфейсе в отношении кода, интервью, карьеры или чего-либо еще Следуй за мной в Twitter и DM мне Отказ
После этого, если вам наслаждаться нашей первой встречей, мы можем обсудить продолжающееся коучинг, чтобы помочь вам достичь ваших целей в области развития в интернете!
Носите свой вклад
Если вы кодируете каждый день, особенно если вы совершаете GitHub, не было бы круто носить эту карту вклада для всех, чтобы увидеть?
Gitmerch.com Позволяет печатать футболку вашей карты вклада GitHub! Используйте код, Yazeed при оформлении заказа для скидки.
Спасибо за прочтение
Для большего количества контента посмотрите https://yazeedb.com!
До скорого!
Оригинал: “https://www.freecodecamp.org/news/redux-in-24-lines-of-code/”