npm 包 redux-universal-renderer 使用教程

redux-universal-renderer 是一个用于服务端渲染 React 应用的 npm 包，它结合了 redux 和 react-router 库，可以让你轻松地将数据初始化到 React 组件中并在服务器上为它生成静态 HTML。

本文将介绍如何使用 redux-universal-renderer 实现服务器端渲染 React 应用，并提供深入指导和示例代码。

安装

使用以下命令在项目中安装 redux-universal-renderer：

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

使用

初始化 Redux Store

首先，我们需要在服务器端初始化 Redux Store。

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

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

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

创建渲染器

接下来，我们需要创建一个渲染器函数，它可以接收一个 URL 并返回一个 Promise 对象。

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

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

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

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

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

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

在这个渲染器函数中，我们首先创建了一个 Redux Store，然后遍历路由配置并查找匹配当前 URL 的路由。如果找到了一个匹配路由，并且该路由拥有 loadData 函数，则将该函数返回的 Promise 存储在 promises 数组中。

当所有的 Promise 都被解决时，我们调用 renderToString 方法将 React 应用转换为字符串，并将其存储在 markup 变量中。最后我们通过 Promise.resolve 将 markup 返回给调用者。

连接到 Express

最后，我们需要将我们的渲染器函数与 Express 整合起来。

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

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

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

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

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

在这个示例代码中，我们创建了一个 Express 应用并启用静态文件服务。然后我们定义了一个处理所有路由的中间件，并将请求的 URL 传递给我们的渲染器函数。最后我们将 React 应用的 HTML 输出到浏览器。

深入指导

Redux Store 的初始化

我们的渲染器函数中使用了一个新的 configureStore 函数。configureStore 函数根据我们在服务器端预加载的数据来初始化 Redux Store。这很重要，因为在客户端和服务器端，我们希望使用同一个 Store 来保持整个应用的状态一致。

React Router 的配置

我们的渲染器函数中还使用了一个 routes 配置数组。这个数组应包含一个对象数组，每个对象都有一个以下属性：

  • path：URL 的路径。
  • component：用于渲染该 URL 路径的 React 组件。
  • exact：为 true 时，只有当前 URL 完全匹配 path 时才会渲染组件。
  • loadData：用于预加载组件所需数据的函数。

如果传递给 renderToString 的 React 组件中包含具有相应路径的路由，则 React Router 将出发该组件的渲染，并使用 loadData 函数在服务器端获取所有必需的数据。

使用 React 技术栈

在这个示例代码中，我们使用了以下 React 技术栈：

这里的元素是服务端服务器端，因为我们要在 server 端生成首屏数据，而这里包括的 React 组件和 React 生态系统是前端通用的，因此您可以自由地使用它们。

示例代码

为了帮助你更好地理解所有这些概念，以下是一个完整的示例代码：

-- ---------

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

只需执行以下两个步骤即可！

  1. npm install
  2. npm run start

启动服务端并访问 http://localhost:3000！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067011e361a36e0bce8d85

阅读全文

猜你喜欢

  • npm 包 ssh-promise 使用教程

    在前端开发中，我们常常需要与远程服务器交互，比如从服务器上下载或上传文件。此时，ssh-promise 这个 npm 包就能派上大用场。 ssh-promise 是一个封装了 ssh2 的库，通过该库...

    4 年前
  • npm 包 springbokjs-db-serverstore 使用教程

    简介 springbokjs-db-serverstore 是一款基于 Node.js 平台的 npm 包，它可以帮助开发者更加轻松地管理 ServerStore，并提供了丰富的 API，方便开发者进...

    4 年前
  • npm 包 springbokjs-di 使用教程

    什么是 springbokjs-di？ springbokjs-di 是一个依赖注入框架，它能够帮助你解耦你的代码并允许你更好地管理你的应用程序中的对象之间的依赖关系。

    4 年前
  • 前端类技术文章：springbokjs-dom npm 包使用教程

    简介 在前端项目开发过程中，我们会使用很多第三方库和框架。npm 是最常用的 JavaScript 包管理器之一，而 springbokjs-dom 是其中一个非常有用的包，它主要用于实现 DOM 操...

    4 年前
  • npm包 springbokjs-dom-components使用教程

    简介 Springbokjs-dom-components是一个基于React的UI组件库，它提供了许多在Web开发中常用且易于维护的DOM组件。此npm包使得在React项目中使用这些组件更加容易。

    4 年前
  • npm 包 springbokjs-models 使用教程

    前言 在前端开发过程中，处理数据是一个关键的环节。随着数据变得越来越复杂，开发者们需要更好的方式来管理数据。为此，很多开发者选择使用 Model-View-Controller （MVC）框架。

    4 年前
  • npm 包 springbokjs-router 使用教程

    简介 springbokjs-router 是一个轻量级的 JavaScript 路由库，可以用于在前端应用程序中启用单页应用程序（SPA）路由。它可以轻松地管理浏览器历史记录和路由事件，并对路由对象...

    4 年前
  • npm包squirrelled使用教程

    前言 在前端开发过程中，我们经常会用到一些和动画、布局相关的npm包。然而，如果每次都从零开始创建动画、布局是一种费时又费力的事情。因此，今天我要介绍一个npm包——squirrelled，它可以极大...

    4 年前
  • npm 包 sqlite3-orm 使用教程

    简介 sqlite3-orm 是一个使用 SQLite 作为数据库，提供面向对象风格的操作方式的 Node.js ORM（对象关系映射）框架，通过该框架可以快速完成数据库表的创建以及数据的 CRUD ...

    4 年前
  • NPM 包 squirrel-react-native 使用教程

    Squirrel-react-native 是一个 React Native 应用程序访问 squirrel 远程调试服务器的 npm 包。它可以帮助开发者更好地调试 React Native 应用程...

    4 年前
  • npm 包 sqlite3-webapi-kit 使用教程

    前言 在 Web 开发中，我们经常需要通过前端来访问数据库并进行数据操作。而其中一种数据库是轻量级的 SQLite，由于其小巧、开源、易部署等优点，使用 SQLite 的 Web 应用越来越多。

    4 年前
  • npm 包 sqlite3-upsert 使用教程

    前言 在前端开发中，我们经常需要使用数据存储工具。而 SQLite 是一种轻量级嵌入式数据库，可以用来存储小型数据，最常用的应用是在本地存储浏览器中的应用程序数据。

    4 年前
  • npm 包 sqlmagic 使用教程

    前言 在进行前端开发的时候，我们经常会与后端的数据库打交道，而 SQL 作为数据库查询语言，对我们开发来讲是一个必须熟练掌握的技能，而 SQL 的编写却有时候十分复杂。

    4 年前
  • npm 包 sqlitedb 使用教程

    在前端开发中，我们经常需要使用数据库来持久化存储数据。而 sqlitedb 是一个基于 Node.js 的轻量级数据库，可以在前端使用。本文将介绍 sqlitedb 的使用方法。

    4 年前
  • npm包sqlite4.js使用教程

    什么是SQLite？ SQLite是一种嵌入式数据库管理系统，使用C语言编写，不需要一个单独的服务器端进程和系统，因此轻量并且成为了非常流行的关系数据库引擎。 SQLite的优势 SQLite的优点在...

    4 年前
  • npm 包 springbokjs-server 使用教程

    什么是 springbokjs-server？ springbokjs-server 是一个用于构建基于 Node.js 服务端应用的轻量级框架，可用于快速开发 RESTful API、Web 应用等...

    4 年前
  • npm 包 sqlite3b 使用教程

    SQLite 是一个流行的轻型关系型数据库，它的优点是启动速度快、占用空间小、资源占用低。而 sqlite3b 是一个基于 SQLite 的 npm 包，它可以让我们更加方便地在前端中使用 SQLit...

    4 年前
  • npm 包 springbokjs-shim 使用教程

    介绍 npm 是 Node.js 生态圈中最常用的包管理工具，提供了各种各样的依赖，让开发者能够更快更方便地开发项目。在前端方面，一些比较流行的框架，如 React 和 Vue.js，都需要在 npm...

    4 年前
  • npm 包 springer-uptime 使用教程

    前言 在进行 Web 开发的过程中，服务器的稳定性和可靠性是我们必须要考虑的因素。其中之一便是成本高昂的服务器监控。幸运的是，有一些 npm 包可以帮助我们监控服务器的状态。

    4 年前
  • npm 包 springbooter-core 使用教程

    什么是 springbooter-core springbooter-core 是一个常用的前端开发工具包，它提供了一系列的工具来简化前端开发过程中的一些重复性操作，比如说路由管理、状态管理、组件缓存...

    4 年前

相关推荐

    暂无文章