Что означает "дегидрат" и "регидрат" в Fluxible?
Я работаю над минимальным приложением, которое работает с гибким. Почти все кажется ясным, но одно: концепция дегидрата и регидратированного состояния.
Я понял, что это то, что нужно для синхронизации хранилища между клиентом и сервером, но я не знаю почему. Эта строка мне очень непонятна:
var exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
В server.js ( https://github.com/yahoo/fluxible/tree/master/examples/react-router)
Буду очень признателен, если вы скажете мне "проще", что это значит.
3 ответа
В контексте Fluxible обезвоживание вашего приложения означает извлечение его состояния в объект. Регидратация вашего приложения использует тот же объект, чтобы повторно внедрить состояние в вашем приложении. Объект, представляющий состояние вашего приложения, должен быть сериализуемым, чтобы отправлять его по сети.
Скажем, я хочу предварительно отрендерить свое приложение на сервере, передать HTML клиенту, а затем перерисовать мое приложение на клиенте. Это было бы тривиально, если бы мое приложение состояло только из статических данных. Тем не менее, мое приложение с отслеживанием состояния: оно получает данные из моего API перед начальным рендерингом и сохраняет их. Извлекая состояние моего приложения на сервере, отправляя его вместе с HTML, а затем повторно внедряя его на клиентском компьютере, я избегаю двух запросов к своему API.
Приведенные выше ответы великолепны, но я думаю, что мы могли бы еще лучше объяснить эту метафору с помощью пиццы. Рассмотрим эту сцену из "Назад в будущее" 2:
В этой сцене есть два важных компонента: обезвоженная пицца Pizza Hut и гидратор Black & Decker. На мгновение проигнорируйте, что нам также понадобится дегидратор для завершения метафоры.
Обезвоженная пицца - это все, что нужно для представления полноценной пиццы, но, как говорит нам обертка, "НЕ ПОТРЕБЛЯЙТЕ, ПОКА НЕ ПОЛНОСТЬЮ РЕГИДИРОВАННАЯ". Обезвоженная пицца, представленная сервером, выглядит вкусно, но на самом деле сама по себе она не очень привлекательна.
Ваше приложение содержит инструкции для бабушки МакФлай, как для гидратора, так и для пиццы. Бабушка МакФлай это браузер. Когда пользователь запрашивает страницу с пиццей "наполовину пепперони / наполовину зеленый перец", серверная часть отправляет обезвоженную пиццу и гидратор Black & Decker. Бабушка МакФлай (браузер) внимательно читает все инструкции и увлажняет пиццу для пользователя. Это очень хорошая вещь, так как пользователь - идиот и не знает или не заботится о разнице между гидратированной и обезвоженной пиццей, точно так же как Марти младший:
Марти-младший: (о) Бабушка, ты можешь просто засунуть [обезвоженную пиццу] мне в рот? (смеется)
Марти: (о) Разве ты не умница!
Пока все хорошо, правда? Польза пока:
- пользователь получает всю (обезвоженную) пиццу и гидратор по первому запросу, вместо того, чтобы просто получить гидратор и позвонить (веб-служба xhr), чтобы заказать пиццу
- веб-сканеры - особенно тупые пользователи, которые получают все, что им нужно, глядя на замороженную пиццу и не нуждаются в бабушке Макфлай, чтобы прочитать инструкции и сделать пиццу интерактивной, гидратировав ее
Но подождите, это еще не все! Пользователь хватает ломтик или два, а затем убегает, оставляя оставшуюся пиццу. Как это происходит, бабушка Макфлай знает из инструкции коробки для пиццы, чтобы сохранить измененное состояние пиццы. Она (на стороне клиента) помещает его в дегидратор (не показан) и отправляет обратно в шкаф (сервер). Если и когда пользователь вернется, чтобы закончить свою половину пиццы пепперони / половину перца, весь процесс обезвоженной пиццы / гидратора / бабушки произойдет снова, и он будет свежим, как всегда, плюс внесенные изменения.
Давайте рассмотрим:
- Обезвоживать означает извлечь текущее состояние приложения и сериализовать его в объект. Это может быть сделано на стороне сервера или на стороне клиента.
- Регидратация означает интерпретацию объекта состояния (созданного путем дегидратации) и превращение приложения в вкусную интерактивную пиццу.
- Полезно передавать объект обезвоженного состояния в любом направлении: от сервера к клиенту или от клиента к серверу.
Конец! За исключением не совсем.
Есть еще одна секретная волшебная часть, чтобы заставить эту метафору работать: каждый раз, когда мы гидратируем пиццу, мы фактически сохраняем обезвоженную пиццу нетронутой. Таким образом, мы получаем как дегидратированную пиццу, так и гидратированную пиццу, а затем синхронизируем их по мере необходимости за кулисами. В случае с Flux это происходит через любое количество магазинов, входящих в ваше приложение. В Redux у вас есть только один магазин верхнего уровня, который может быть немного проще для понимания.
Дегидрат - это еще одно слово для сериализации, а регидрат - для десериализации.
Накачивание == (ре) увлажнение == десериализация
Таким образом, строка кода сериализует состояние маршрутизатора и назначает объект для window.app, который доступен из клиента.
Обновить
Пример использования сериализации:
Предположим, у нас есть объект пользователя и мы хотим сохранить ссылку на пользователя, вошедшего в систему в данный момент между запросами. Мы можем сериализовать пользователя, просто взяв его идентификатор и сохранив его в сессии. Это будет сериализация или обезвоживание объекта пользователя. Для гидратации или десериализации мы просто берем идентификатор из сессии, находим нашего пользователя в БД и снова вводим объект пользователя. Цель здесь - сохранить как можно меньше памяти.
В одном из примеров гибкой функции dehydrate просто возвращает имя текущего состояния, а функция гидрата принимает имя состояния в качестве аргумента и устанавливает его в качестве текущего состояния. Я думаю, что объекты полных состояний доступны как на клиенте, так и на сервере. Таким образом, поскольку вам не нужно отправлять весь штат, вы отправляете только название штата. Функция обезвоживания так же проста, как
State.dehydrate = function(){
return this.currentStateName;
}