Redux 是一个流行的 JavaScript 应用程序状态管理库。它是用于构建复杂的 Web 应用程序的强大工具。在大多数情况下，Redux 在客户端中使用，但是有些应用程序需要在服务端和客户端之间共享数据。在本文中，我们将学习如何在 Redux 中实现跨服务端和客户端共享数据。
什么是服务端渲染
服务端渲染是指在服务器上生成 HTML，然后将其发送到浏览器。它与客户端渲染不同，客户端渲染是指在浏览器中生成 HTML，然后将其呈现给用户。服务端渲染的优点是可以提高应用程序的性能，减少页面加载时间，提高搜索引擎优化（SEO）等。
如何在服务端和客户端之间共享 Redux 数据
在服务端渲染中，我们需要在服务端和客户端之间共享 Redux 数据。在服务端渲染中，我们需要在服务器上呈现 HTML，同时在客户端上呈现 HTML。为了实现这一点，我们需要在服务器上和客户端上都创建 Redux Store，并在两者之间共享数据。
以下是在服务端和客户端上共享 Redux 数据的步骤：
步骤 1：创建 Redux Store
我们需要在服务器上和客户端上都创建 Redux Store。我们可以使用 createStore 函数来创建 Redux Store。
import { createStore } from 'redux';
import rootReducer from './reducers';
const preloadedState = window.__PRELOADED_STATE__;
const store = createStore(rootReducer, preloadedState);在上面的代码中，我们首先导入 createStore 函数和根 Reducer。然后我们从 window.__PRELOADED_STATE__ 获取预加载的状态，并将其传递给 createStore 函数。这将在服务器上创建 Redux Store。
对于客户端，我们可以简单地使用相同的代码来创建 Redux Store。
步骤 2：将状态发送到客户端
我们需要将状态发送到客户端，以便客户端可以使用预加载的状态来创建 Redux Store。我们可以使用 JSON.stringify 将状态转换为字符串，并将其附加到 HTML 页面上。
-- -------------------- ---- -------
----- -------------- - ---------------------------------------------- -----------
----- ---- - -
------
------
--------- -----------
-------
------
---- ----------------
--------
-------------------------- - ------------------
---------
------- --------------------------
-------
-------
--在上面的代码中，我们首先将状态转换为字符串，并使用 replace 函数将 < 替换为 \u003c，以防止 XSS 攻击。然后我们将状态字符串附加到 HTML 页面上，并将其设置为 window.__PRELOADED_STATE__。这将在客户端上创建 Redux Store。
步骤 3：在服务端和客户端之间共享数据
我们已经在服务器上和客户端上创建了 Redux Store，并将状态发送到客户端。现在，我们需要确保在服务端和客户端之间共享数据。
我们可以使用 Redux 的 serialize 和 deserialize 函数来实现这一点。serialize 函数将 Redux Store 中的状态序列化为字符串，deserialize 函数将字符串反序列化为状态对象。
import { serialize, deserialize } from 'redux';
const serializedState = serialize(store.getState());
// 在客户端上
const preloadedState = deserialize(window.__PRELOADED_STATE__);在上面的代码中，我们首先使用 serialize 函数将状态序列化为字符串。然后在客户端上，我们使用 deserialize 函数将状态字符串转换回状态对象，并将其传递给 createStore 函数。这将在客户端上创建 Redux Store，并使用预加载的状态。
示例代码
以下是一个完整的示例代码，演示如何在 Redux 中实现跨服务端和客户端共享数据。
-- -------------------- ---- -------
-- -----------
------ - --------------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----------- - -----------------
--------
---
------ ------- -------------- -------------------- ---- -------
-- ---------
------ ------- ---- ----------
------ - ----------- - ---- --------
------ - -------------- - ---- -------------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----------- ---- -------------
------ - --------- - ---- --------
----- --- - ----------
----------------------------------
------------ ----- ---- -- -
----- ----- - -------------------------
----- ---- - ---------------
--------- --------------
---- --
-----------
--
----- -------------- - ----------------------------
----- --------- - -
------
------
--------- -----------
-------
------
---- -----------------------
--------
-------------------------- - ------------------
---------
------- --------------------------
-------
-------
--
--------------------
---
---------------- -- -- -
------------------- -- --------- -- ---- -------
----- -------------------- ---- -------
-- ---------
------ ----- ---- --------
------ - ------- - ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----------- ---- -------------
------ - ----------- - ---- --------
----- -------------- - ----------------------------------------
----- ----- - ------------------------ ----------------
--------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们首先创建了一个简单的 Reducer，然后在服务器上和客户端上都创建了 Redux Store。然后我们使用 serialize 函数将状态序列化为字符串，并使用 deserialize 函数将状态字符串转换回状态对象。
结论
在本文中，我们学习了如何在 Redux 中实现服务端渲染，并在服务端和客户端之间共享数据。我们使用了 Redux 的 serialize 和 deserialize 函数来实现这一点。我们还演示了一个完整的示例代码，以帮助您更好地理解如何在 Redux 中实现跨服务端和客户端共享数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d77bde1dcc5c0fa3d1459