npm 包redux-data-ssr 使用教程

#npm 包redux-data-ssr 使用教程

介绍

redux-data-ssr是一款基于Redux的前端数据管理工具，通过插件的方式为数据添加了服务端渲染功能。在服务器端，我们可以在每个页面的数据请求之前，自动dispatch一个简单的actions，来获取数据并填充到store中，以供后续渲染使用。

这里我们将介绍如何使用redux-data-ssr来实现服务端渲染，并以一个简单的示例为例，来说明该工具的使用方法及其优点。

前置知识

本文假设你已经了解Redux的基本概念和使用方法，并且能够理解异步action和react-redux的服务端渲染用法。

安装

在开始之前，我们需要先安装redux-data-ssr。可以通过以下 npm 命令来安装：

--- ------- ------ --------------

使用

首先，我们需要在服务器端初始化我们的 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

阅读全文

猜你喜欢

  • npm 包 jdate-converter 使用教程

    在前端开发中，经常会遇到把公历日期转换成农历日期的需求。而使用 npm 包 jdate-converter 可以轻松完成这个任务。本文将详细介绍 jdate-converter 的使用方法，并附上示例...

    3 年前
  • npm 包 ngx-boilerplate 使用教程

    引言 在前端开发中，使用工具和框架可以大大提高开发效率。而 ngx-boilerplate 就是一款提供了基本框架的 npm 包，在前端开发中可以使用的一个强大的工具。

    3 年前
  • npm 包 ve-alert- 使用教程

    前言 在前端开发中，我们经常需要用到写弹窗或提示框的功能。如果每次从零开始写，不仅效率低下，还容易出现漏洞。因此，很多前端工程师会选择使用现成的组件库或者 npm 包，以提高开发效率和降低出错概率。

    3 年前
  • npm 包 parse-reminder 使用教程

    在前端的开发过程中，我们经常需要解析日期和时间字符串。而 npm 包 parse-reminder 能够帮助我们解析英文时间表达式，使得日期和时间字符串的处理更为简便。

    3 年前
  • npm 包 ts-components 使用教程

    在前端开发中，组件化编程已经成为了一种非常流行的编程方式。而随着 TypeScript 在前端开发中的应用越来越广泛，相应的 TypeScript 组件库也层出不穷。

    3 年前
  • npm 包 thicc 使用教程

    前言 在前端开发中，经常会用到不同的库和框架来辅助我们完成各种功能，而 npm 成为了前端开发中不可或缺的工具之一。在 npm 上，有很多优秀的包，如今，我们就来介绍其中一个叫做 thicc 的包。

    3 年前
  • npm 包 uni-notification 使用教程

    前言 在现代的前端开发中，我们经常会使用一些 UI 框架和组件库来简化开发流程。但是有时候我们还需要使用一些通知组件来向用户展示一些信息。在这篇文章中，我们将介绍一个通知组件 npm 包 uni-no...

    3 年前
  • npm 包 vanduul.space 使用教程

    简介 vanduul.space 是一个基于 Vue.js 的 UI 库，旨在提供现代化、易用且高品质的前端组件，可以兼容大多数现代浏览器。 通过 npm 包管理工具的使用，vanduul.space...

    3 年前
  • npm 包 @eight-solutions/react-grid-layout 使用教程

    前言 在现代化的 Web 应用中，使用网格布局是十分常见的。如果浏览器的内置布局系统不能满足开发者的需求，那么前端库和框架可以提供一些可选的解决方案。今天，我们将讨论一个 npm 包 @eight-s...

    3 年前
  • npm 包 audiosprite-ca 使用教程

    介绍 audiosprite-ca 是一个基于 Node.js 的 npm 包，可以将多个音频文件合并成一个音频文件，并生成一个 JSON 文件，用于在网页中播放音频。

    3 年前
  • npm 包 detect-libc-async 使用教程

    在前端开发中，我们经常会使用一些第三方工具库来处理各种任务。其中，npm 是一个非常流行的包管理器，它提供了大量的开源库供我们使用。detect-libc-async 就是其中一个非常有用的 npm ...

    3 年前
  • NPM包platzom-fundamentosjavascript使用教程

    什么是platzom-fundamentosjavascript？ platzom-fundamentosjavascript是一个基于JavaScript的NPM包，在字符串处理方面有特殊的功能。

    3 年前
  • npm 包 Emberfire-Chat 使用教程

    前言 随着现代化的 Web 开发发展，前端技术日新月异，而 npm 包作为前端开发中必不可少的存在，为我们的开发带来了方便和快捷。在众多 npm 包中，组件库和框架占据着绝大部分，这些组件库和框架使得...

    3 年前
  • npm 包 esp3-parser 使用教程

    前言 随着智能家居等物联网设备的普及，越来越多的设备都开始采用无线方式进行通信。其中，EnOcean 技术便是一种非常流行的无线通信技术，它主要用于无线灯控、智能电表等设备的通信。

    3 年前
  • npm 包 ncrypt-module 使用教程

    在前端开发中，数据安全性是一个非常重要的问题。为了保障数据的安全，可以使用加密算法来对敏感数据进行加密。在 Node.js 中，有一款非常好用的加密算法库 ncrypt-module，可用于在前端加密...

    3 年前
  • npm 包 html_resolve 使用教程

    前言 在前端开发中，我们经常需要从后端获取数据，然后将数据展示在页面中。而获取到的数据往往是包含 HTML 标签的字符串格式，这时候我们就需要将这些 HTML 标签渲染成页面上的 DOM 元素。

    3 年前
  • npm 包 pixi-multistyle-text-ohze 使用教程

    什么是 pixi-multistyle-text-ohze？ pixi-multistyle-text-ohze 是一个使用 Pixi.js 的 npm 包，它允许开发者在 Pixi.js 应用程序中...

    3 年前
  • npm 包 react-native-animated-router 使用教程

    概述 react-native-animated-router 是一款支持多种动画效果的 react-native 路由管理器，它可以帮助前端开发者简化路由管理，并实现多样化的路由动画。

    3 年前
  • npm 包 Simple-round 使用教程

    背景 在前端开发中，经常需要进行数字的四舍五入操作，虽然 JavaScript 中已经有了原生的 Math.round() 函数，但是在使用时还是会存在一些问题，例如要进行一些定制化的四舍五入操作等。

    3 年前
  • npm 包 cordova-plugin-bigbug-handheld 使用教程

    简介 cordova-plugin-bigbug-handheld 是一款适用于 Cordova 应用开发的插件，旨在提供丰富的移动端硬件操作能力，包括拍照、录音、扫码、蓝牙等。

    3 年前

相关推荐

    暂无文章