在前端领域，redux 管理状态成为了非常流行的一种方式，它被广泛应用于 React 和其他框架中。然而，随着应用的增长，我们可能需要将状态管理放在服务端以支持 SEO 、服务器端渲染等需求。为此，我们可以使用 redux-universal 这个 npm 包来实现同构应用。
安装
首先，我们需要在项目中安装 redux-universal：
npm install redux-universal --save
使用
服务器端
redux-universal 允许我们在服务端和客户端上使用相同的 redux 配置。我们需要首先在服务器端创建 store ，并在创建完毕后将其序列化以在客户端上使用。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - ------- - ---- ------------------
------ -------- ---- -------------
------ --- ---- --------
------ ------- ---- ----------
------ --------- ---- -----------------------
------ ----- ---- --------
------ - -------------- - ---- -------------------
----- --- - ----------
------------ ----- ---- -- -
----- ----- - ----------------------
----- ----- - -----------------
----- --------- - ---------------
----- ---- - ---------------
--------- --------------
---- --
-----------
--
----- ------ - -
------
------
--------- --------- ----- -----------
-------
------
---- ----------------------
--------
-------------------------- - ------------------------------------ -----------
---------
------- --------------------------
-------
-------
--
-----------------
---
---------------- -- -- -
------------------- ------- -- ------------------------
---在上述示例中，我们首先创建了一个 Redux store ，然后将其序列化并注入到客户端的 HTML 中。注意要使用 serialize-javascript 包来对序列化出的字符串进行转义。
客户端
在客户端代码中，我们可以使用 createClientStore 方法来创建一个客户端 store ，并将服务端传递的预加载状态传入：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - ----------------- - ---- ------------------
------ -------- ---- -------------
------ --- ---- --------
----- -------------- - ---------------------------
------ ---------------------------
----- ----- - --------------------------- ----------------
-----------------
--------- --------------
---- --
------------
------------------------------
--注意，客户端端代码使用了 ReactDOM.hydrate 来执行客户端渲染，以避免传入的预加载状态被完全替换。
总结
redux-universal 允许我们在服务端和客户端上重用相同的代码和状态，实现了真正的同构应用。使用 redux-universal，我们可以通过创建服务器端 store 和客户端 store 的方式来完成同构应用，并且避免了在服务端和客户端上重复编写相同的代码，并提高了应用性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067011e361a36e0bce8d83