Pull to refresh

Веселый стейт менеджмент фреймворк Huex

Reading time 2 min
Views 3.1K
image

Введение


Меня всегда удивляло, как много действий надо делать для стейт менеджмент фреймворков — сразу описывать схему, писать мутации, комитать их… Почему бы не сделать всё минимально просто?)

Зачем писать код, когда его можно не писать?

(updated)
Представляю вашему вниманию мою получасовую поделку — Huex!

Пока что решение доступно только на платформе NodeJS, но для презентации думаю будет достаточно.

Дисклеймер: Huex написан мной всего лишь в развлекательно-образовательных целях и не претендует на место полноценного фреймворка. А может и претендует. А теперь поехали.

Для чего он нужен?


Иметь единое удобное хранилище данных. Иметь возможность следить за их изменениями. Избавится он непонятных слов вроде «getters», «mutators», «actions», «commit», etc.

Как его установить?


Пока только скопировав этот репозиторий.
После того, как репозиторий скопирован, его нужно подключить через package.json вашего проекта где-то в таком виде:

"dependencies": {
    "huex": "file:../huex/"
  }

После этого он будет доступен как модуль «huex».

Или сделать еще проще, как верно заметил dpr:
npm i -S https://github.com/vssenko/huex.git

Как им пользоваться?


Максимально естественно и просто. Начнем сразу с кода:

// Подключаем huex.
const Huex = require('huex');

// Создаем хранилище.
const storage = Huex();

// Добавляем обработчики на изменение какой-либо переменной.
storage.on('change:a', (e) => console.log(`Property "a" was changed: ${e.value}`));

// Меняем значение переменной самым натуральным образом.
storage.a = 5;

И это всё. При любом изменении\установки поля нашего хранилища будут создаваться два события: change с данными { key, value } и change:key с данными { value }.
(updated)
А для вложенных объектов и массивов, события будут созданы как у вложенного объекта, так и у родителя.
Достаточно для создания проектов любой сложности.

Может что-то еще?


Конечно: вы можете прямо на ходу создавать глубоко вложенные поля, и никаких исключений не будет создано.

const Huex = require('huex');

const storage = Huex();

storage.a.b.c.d.e = 5;

И разумеется на все вложенные объекты так же можно навесить обработчики событий.

(updated)

Может еще что-то еще?


Да! Теперь Huex работает не только с простыми данными, но и с объектами и массивами, на ходу переделывая их в Huex-хранилища!
    sut.subSut = {
      a: 5
    };

    sut.on('change:subSut', (e) => {
      console.log(e.key); // subSut
      console.log(e.value.a) // 10
      console.log(e.nested); // { key: 'a', value: 10 }
    });

    sut.subSut.a = 10;


Еще больше примеров доступно в тестах проекта.

А в чем подвох?


Вся эта магия реализована посредством Proxy. А это не самое быстрое решение, и в целом не рекомендуют использовать класс Proxy в продакшене.

(update)

Заключение


За два цикла (вечера) разработки у JS-сообщества появился еще один интересный фреймворк.
Что Huex умеет:
  • Инициализироваться из объекта\массива
  • Сохранять значения путем простого присваивания
  • Триггерить события при изменения себя как объекта или как массива
  • На ходу переделывать записанные в него объекты\массивы в Huex-хранилища
  • Триггерить события при изменения поля-объекта или поля-массива
  • На ходу генерировать пустые хранилища при обращении к несуществующему полю (спорная фича, но очень прикольная)

Что Huex не умеет:
  • Быть быстрым :-). Хотя, как заметил Drag13, прогресс в сторону скорости работы Proxy всё же есть, поэтому вдруг такой подход станет популярным.
Tags:
Hubs:
+5
Comments 22
Comments Comments 22

Articles