Реактивное печенье с RXJS

Нам необходимо надежно сохранить данные на устройстве клиента и, для этого, у нас есть файлы cookie. Пакет NPM JS-Cookie Предоставляет нам простым интерфейсом для хранения и извлечения файлов cookie. Давайте построим обертку для этого интерфейса, чтобы сделать наше печенье реагировать.

Реактивное cookie будет создано с ключом.

import { of, Subject } from 'rxjs';

class ReactiveCookie {

    constructor(key) {
        this.key = key;
    }

}

Давайте добавим GetTers и Getters для стоимости.

constructor() {
    ...
    this.value = new Subject();
}

getValue() {
    return this.value;
}

setValue(value) {
    this.value.next(value);
}

Здорово! Мы хотим, чтобы сохраненное cookie нужно обновлять каждый раз, когда мы устанавливаем значение, чтобы он всегда в синхронизации. Мы подписываемся на ценность Субъект и установите файл cookie на каждом значении.

constructor() {
    ...
    this.synchronize();
}

synchronize() {
    this.getValue().subscribe((value) => { Cookies.set(this.key, value); });
}

Хорошо, как насчет того, когда уже есть сохраненное значение. Мы хотим, чтобы это сохраненное значение было установлено как начальное значение, поэтому мы добавим это также для конструктора.

constructor() {
    this.retrieveStoredValue();
}

getStoredValue() {
    return of(Cookies.get(this.key));
}

retrieveStoredValue() {
    this.getStoredValue().subscribe((value) => { this.value.next(value) });
}

Ву! Теперь, когда мы создаем файл cookie с ключом, который уже имеет сохраненное значение, это значение будет автоматически загружено в Reactivecookie ценность Отказ Кроме того, установка нового значения будет немедленно обновлять значение сохраненного cookie. Наконец, давайте добавим Очистить () и Удалить () Методы для завершения нашей функциональности.

clear() {
    this.setValue(null);
}

remove() {
    Cookies.delete(this.key);
    this.value.complete();
}

Теперь выходи и храните некоторые ценности!

Оригинал: “https://dev.to/lysofdev/reactive-cookies-with-rxjs-1g9m”