#npm 包redux-data-ssr 使用教程
介绍
redux-data-ssr是一款基于Redux的前端数据管理工具，通过插件的方式为数据添加了服务端渲染功能。在服务器端，我们可以在每个页面的数据请求之前，自动dispatch一个简单的actions，来获取数据并填充到store中，以供后续渲染使用。
这里我们将介绍如何使用redux-data-ssr来实现服务端渲染，并以一个简单的示例为例，来说明该工具的使用方法及其优点。
前置知识
本文假设你已经了解Redux的基本概念和使用方法，并且能够理解异步action和react-redux的服务端渲染用法。
安装
在开始之前，我们需要先安装redux-data-ssr。可以通过以下 npm 命令来安装：
npm install --save redux-data-ssr
使用
首先，我们需要在服务器端初始化我们的 Redux store。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ ------------ ---- ---------------- ------ ----------- ---- ------------ ----- ---------- - ---------------- -- --- ----------------------- -- --- - ----- ----- - ------------------------ -----------
在这里，我们把 reduxDataSSR 的中间件添加到 Redux store 中。这将允许服务器端发送 actions 并在传递给客户端的 HTML 中包含 state 数据。
配置
一旦我们有了 Redux store，我们需要为这个 Redux store 选择配置。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
----- ------- - -
-- ---------
--------- --
-- -- ---- ---- ------ ------ -------
--- --------
-- --------------
---- -------------------------
--
-
---------------- --------我们可以在该配置中设置预先填充数据的请求。每一个请求中都通过 “id” 来标识该请求所返回的 JSON 数据的名字与 action creator。这里我们在 store 中设置了一个名叫 “items” 的 action creator。
由于我们在这里仅演示redux-data-ssr的使用方法， 因此我们不会创建实际的React组件，但是，如果需要让store的数据能够在React组件中稳定引用，也需要设置锚点。锚点可以让我们知道什么时间点上store中的哪些数据是可用的。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ - ---- ----------------
------ ------- -- ------ -------- -- -- -
-----
--- ----------------------- ---
------- ----- --
------------- - -------- - ---------- ---------
----
--------------- -- -
--- ------------------------------
---
-----
------
-现在，我们已经可以在服务器端填充Redux store的数据了。接下来，我们需要将这些数据转换为 HTML，并将 HTML 发送给浏览器。
-- -------------------- ---- -------
------ -------------- ---- ------------------
------ --- ---- -------
----- ---- - ------------------------------
---- --------------- --
-
----- ----- - --------------------------------
----- -------- - ---------- -----
------
------
----- ----------------
--------- -----------
------- ---------------- ---------------
-------------------------------- - -----------------
-------
------
---- -----------------------
-------
-------
-
------------------在这里，我们使用了 ReactDOMServer.renderToString 将App组件渲染为字符串，并将其存储在 HTML 变量中。接下来，我们获取了Redux store的状态，并将其存储在一个文本变量中。
最后，我们将 HTML 与 Redux store 数据一起发送到 HTML 文件中。该文件启动时将使用 store 数据来渲染正确的 App 组件。
示例代码
为了更好的说明 redux-data-ssr 的使用流程，我们来看一个简单的实例。
考虑到如下的 Redux store。
-- -------------------- ---- -------
------ - --------------- - ---- -------
------ - --------------- - ---- -----------
----- ------------ - ------ - --- ------- -- -
------ ------------- -
---- ----------------
------ --------------
--------
------ -----
-
-
----- ----------- - -----------------
------ ------------
--
------ ------- -----------我们首先需要在服务器端创建store。我们使用 Express 框架来处理请求，并使用 reduxDataSSR 来填充 store。
-- -------------------- ---- -------
------ ------- ---- ---------
------ - ------------ --------------- - ---- -------
------ ------------ ---- ----------------
------ ----------- ---- ------------
------ --- ---- -------
----- --- - ---------
-- -----------------
----- ---------- - ----------------
-- ---
-----------------------
-- ---
-
-- ------------- -------
----- ----- - ------------------------ -----------
-- ---------
----------------
--------------------
--
-- --------------- ------------- --------
-------- -------------------- --------------- -
------ -
--------- -----
------
------
----- ---------------- --------------- ------------------------- --
--------- ------------
----- --------------- ---------------------------- -----------------
-------
------
---- -----------------------
--------
-------------------------- - -----------------------------------------
-----
---------
--
---------
------- ---------------------- ---------------------------------
-------
-------
-
-
-- -------------------------
------------------- ----- ---- -- -
----- ------- - -- ----------------------------
----- ---- - ---------------
------------- ------------------ ------------------
---- ------------- --
---------------
-
----- -------------- - ----------------
----------------------------- ----------------
--
-- -----------------
---------------- -- -- -
---------------------- -- -----------------------
--如上所示，当用户访问/ product 页面时，服务器将调用App组件以获取 HTML，并且会发送填充store数据的请求。
接下来，可以在客户端使用以下代码将 store hydrate
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - ------------- -- ------ - ---- ------------------
------ - -------- - ---- -------------
------ - --------- - ---- ----------------
------ ----------- ---- ------------
------ --- ---- -------
----- -------------- - --------------------------
------ --------------------------
----- ----- - ---------------------- ---------------
----------------
--------- --------------
--------
---- --
---------
------------
-------------------------------
-对应于前例，我们首先获取预先填充的 state。接下来，我们通过 Redux Data SSR 的 configure 方法，使用预先填充的 state 来配置 store。
现在，store 的状态已经与服务器端的状态同步，Redux Data SSR 已帮我们完成了服务端渲染的复杂工作。
结论
Redux Data SSR 是一门深度技术，当被正确的使用时，它能够帮助我们快速开发服务端渲染应用。在上述简单示例中，我们演示了如何在服务器端渲染 React 应用，将state发送到浏览器端，并使用预先填充的 state 来重建 Redux store的初始状态。
始终牢记你的应用中所使用的技术栈，并且在选择适合你的应用程序的技术时，要考虑到该应用程序的整个架构。 在上面的示例中，我们使用了Redux Data SSR来快速实现服务器端渲染 React 应用，如果这符合你的需求，那么该工具值得学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663f81e8991b448e2486