Добро пожаловать! В сегодняшнем посте я хотел бы поговорить о управлении государством приложения. Мы обсудим, что является государством и построить решение для управления голыми костью с помощью Teadercript.
Какое государство и почему нам это нужно?
Состояние приложения является частью информации, проводимой вместе и может быть доступна из разных частей вашего приложения. Данные, хранящиеся в штате, – это снимок динамических свойств вашей программы в данный момент. Зачем нам это нужно?
- Государство помогает держать кусочки применения в синхронизации
- Централизация делает приложение более ремонтом и кодом более читаемый
Простое состояние
В чрезвычайно упрощенной версии состояние – это просто объект JavaScript. У государства есть некоторые свойства, которые могут получить разные потребители. В приведенном ниже примере наше состояние отслеживает счет. статуссумера Мутирует состояние, увеличивая количество, а StateConsumerb журналы состояния в консоль.
interface State {
count: number;
}
const state: State = {
count: 0
};
function stateConsumerA() {
state.count++;
}
function stateConsumerB() {
console.log(state);
}
stateConsumerA();
stateConsumerB(); // log: {count: 1}
Что мы можем сделать лучше? Одним из важных требований к государству является неизменность. Непомышленность помогает предотвратить некоторые нежелательные побочные эффекты, которые могут вызвать мутацию. Кроме того, неизменность позволяет сравнивать разные состоятельные снимки для решения, следует ли выполнять дорогую операцию.
Неизменное состояние
Представьте себе, что ваша заявка является публичной библиотекой, а ваше государство является священной книгой. Как библиотека, вы готовы поделиться контентом этой книги, но вы не хотите, чтобы это было повреждено. Поэтому, когда кто-то просит эту книгу, вы отправляете этого человека копию. Неизмермость в JavaScript также достигается путем создания копии.
Рассмотрим пример ниже. Мы используем IIFE Чтобы инкапсулировать состояние приложения в закрытии и выставить методы для чтения и обновления состояния.
interface State {
count: number;
}
interface StateStore {
getState(): State;
increment(): void;
}
const stateStore: StateStore = (function(): StateStore {
const _state: State = {
count: 0
};
return {
getState: () => ({ ..._state }),
increment: () => {
_state.count++;
}
};
})();
function stateConsumerA() {
stateStore.increment(); // original state count is incremented by one
stateStore.getState().count = 100; // original state count is not mutated
}
function stateConsumerB() {
console.log(stateStore.getState());
}
stateConsumerA();
stateConsumerB(); // log: {count: 1}
Вы можете заметить, что вместо того, чтобы возвращать фактическое состояние состояния, мы создаем его мелкую копию. Поэтому, когда StateConsumera Попытки мутировать объект штата, он не влияет на вывод из StateConsumerb Отказ
В качестве альтернативы можно использовать его с использованием классов ES6, что будет нашим предпочтительным подходом для остальной части этого поста.
class Store {
private state: State = {
count: 0
};
public getState(): State {
return { ...this.state };
}
public increment() {
this.state.count++;
}
}
const stateStore = new Store();
Подписаться на штат обновления
Теперь, как вы получили представление о том, что на самом деле это государство, вам может быть интересно: «Хорошо, теперь я могу обновить состояние. Но как я знаю, когда государство было обновлено? ». Последняя недостающая часть имеет причина подписки к обновлениям государства. Вероятно, это одна из причин, почему кто-то беспокоит государственное управление – сохранить приложение в синхронизации.
Есть много блестящих решений для управления государством. Но у большинства из них есть что-то общее – они полагаются на Узор наблюдателя Отказ Концепция проста, но хотя бы мощная. Тема Отслеживает состояние и его обновления. Наблюдатели (в нашем случае государственные потребители) являются Прилагается на эту тему и уведомление всякий раз, когда государственные изменения.
type Observer = (state: State) => void;
Наблюдатель, в нашем случае, это просто функция, которая занимает Государство в качестве ввода и выполняет некоторые операции с этим состоянием. Давайте создадим Наблюдатель Это регистрирует, если Считать нечетно или даже:
function observer(state: State) {
const isEven = state.count % 2 === 0;
console.log(`Number is ${isEven ? "even" : "odd"}`);
}
Теперь нам нужно переделать наше Магазин класс.
class Store {
private state: State = {
count: 0
};
private observers: Observer[] = [];
public getState(): State {
return { ...this.state };
}
public increment() {
this.state.count++;
this.notify(); // We need to notify observers whenever state changes
}
public subscribe(observer: Observer) {
this.observers.push(observer);
}
private notify() {
this.observers.forEach(observer => observer(this.state));
}
}
Давайте посмотрим на этот пример. Магазин наше Тема содержит информацию о состоянии и позволяет подписки Наблюдатели для обновлений, добавляя их в список и вызовущие с новейшим моментальным снимок состояний, когда он меняется. Вот в действии:
const stateStore = new Store(); stateStore.subscribe(observer); stateStore.increment(); stateStore.increment(); stateStore.increment();
Наш код будет производить следующий вывод:
Number is odd Number is even Number is odd
Хотя мы не назвали нашу функцию наблюдателя, Тема делает свою работу по Уведомление наблюдатели и называя их последним состоятельным снимком.
Последний, но тем не менее важный
Пример, обсуждаемый в этом посте, не является исчерпывающим. В реальном сценарии вы также должны принять участие в работе и отписаться или отсоединять наблюдатели, когда это необходимо.
class Store {
...
public unsubscribe(observer: Observer) {
this.observers = this.observers.filter(item => item !== observer);
}
...
}
Вывод
Государственное управление является важной темой. Мы имеем дело с ним независимо от технологии, и поэтому я думаю, что важно знать, как он работает под капотом. Дайте мне знать, если вы найдете эту тему интересную, и я буду рад уточнить это в будущем. Если вам понравились мои посты, пожалуйста, распространите слово и Следуй за мной в Twitter 🚀 и Dev.to. Для более захватывающего содержания о веб-разработке.
Оригинал: “https://dev.to/glebirovich/application-state-management-d82”