在进行服务器端渲染时，我们通常需要将应用程序的状态序列化以便于在客户端重新加载。这时一个称为“反序列化”（即将序列化的数据转换为原始对象）的过程便显得十分必要，处理这个过程的工具之一就是 redux-dehydrate。
Redux-dehydrate 的作用
Redux-dehydrate 是一个 Redux 的中间件，它可以在应用程序首次加载时从服务器上获取序列化的状态，并将其还原为 JavaScript 的对象。
在项目中安装 Redux-dehydrate
首先，需要在您的项目中安装 Redux-dehydrate 中间件，打开终端并使用以下命令进行安装：
npm install redux-dehydrate --save
在 Redux 应用程序中使用 Redux-dehydrate
要使用 Redux-dehydrate，您需要在您的 Redux 应用程序的 createStore 方法中加入它。在 Redux 应用程序中，我们可以使用 combineReducers() 函数将所有的 reducer 组合成一个单一的 reducer，并传递给 createStore() 函数。为了使用 Redux-dehydrate 中间件，我们需要将其传递给 createStore() 函数中。
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ ----- ---- -------------- ------ - --------- - ---- ------------------ ------ -------- ---- ------------- ----- ---------- - -------- ----- ----- - ------------ -------------------------- ------------ -- -- --------------- --- ------------------------------ --
将状态序列化并发送到浏览器
在服务器端代码中，我们需要将应用程序状态的字符串 HTML 注入到模板中，以便在应用程序首次加载时从浏览器中反序列化。
这是一个例子：
-- -------------------- ---- -------
------ ------- ---- ----------
------ -------------- ---- -------------------
------ - -------- - ---- --------------
------ - ------------ - ---- -------------------
------ --- ---- ----------------
------ -------------- ---- ------------------------------------
------ - ------- - ---- ------------------
----- ------ - ----------
--------------- ----- ---- -- -
----- ------- - ---
----- ----- - ----------------- -- --- ----- ------
----- --- - -
--------- --------------
------------- ------------------ ------------------
---- --
---------------
-----------
--
----------------------------------- -- -----------
----- --------------- - --------------- -- -------------------
----------
--------- -----
------
------
--------- -----------
-------
------
---- -----------------------------------------------------
--------
--------------------------- - -------------------
---------
------- ---------------------------------
-------
-------
---
---在这个例子中，hydrate() 方法会将应用程序状态序列化为字符串，并将其注入到 HTML 模板中。
在浏览器中反序列化状态
在客户端代码中，我们需要检查是否存在 serializedState 并反序列化它以恢复应用程序的状态。Redux-dehydrate 提供了一个 deserialize() 方法来帮助解决这个问题。
这是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------- - ---- -------------------
------ --- ---- ----------------
------ ----------- ---- ------------------------------------
------ - ----------- - ---- ------------------
----- --------------- - ----------------------------
----- ----- - ------------------------------------------ -- ----------
----- --- - -
--------- --------------
---------------
---- --
----------------
-----------
--
--------------------- ---------------------------------在这个例子中，deserialize() 方法会将序列化的字符串转换为 JavaScript 对象，并将该对象传递给 createStore() 来创建一个 Redux store。
总结
Redux-dehydrate 是一个非常方便的库，它可以帮助我们进行状态序列化和反序列化，并让我们在应用程序的客户端和服务器端代码之间共享状态。在任何需要使用服务器端渲染的项目中，我们都可以使用这个库来帮助我们处理状态序列化的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b13