npm 包 redux-ssr-fetch 使用教程

简介

在 React 的服务器端渲染中，需要在服务端获取数据后再进行页面渲染，而 Redux 作为 React 状态管理的一种解决方案也有着强大的异步数据处理能力。然而，在服务器端渲染中，前端异步请求数据常常会带来一定的负担和复杂度。

于是，redux-ssr-fetch 应运而生，它作为一个 Redux 中间件，可以在服务器端和客户端均使用，用于简化前端异步请求数据的流程，缓解后端的负担和前端的复杂度。

安装

可以通过 npm 安装 redux-ssr-fetch

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

使用

1. 安装依赖

redux-ssr-fetch 中的核心依赖是 isomorphic-fetch，请确保已经安装，如果没有请安装：

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

2. 引入中间件

在 Redux store 中引入 redux-ssr-fetch 中间件并配置，以 Express 服务器为例：

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

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

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

-- ---

其中，fetch 为 isomorphic-fetch 的 fetch 方法。

3. 编写 action

使用 redux-ssr-fetch，我们需要为异步请求数据的 action 加上一个 @ssrFetch 的标识：

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

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

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

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

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

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

其中，endpoint 为请求的地址，fetchOptions 为 fetch 方法的选项，requestAction、successAction、failureAction 分别为开始请求、请求成功、请求失败时的 action。

下面是一个完整的 action 示例：

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

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

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

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

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

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

4. 组件的服务端渲染

使用这个 package 则可以非常简单的解决服务端渲染异步请求出现的某些问题，比如 Hydration 过程中的异步数据的请求和加载等问题。

5. 客户端激活

使用 redux-ssr-fetch，你可以在客户端继续使用服务端渲染的数据，即所谓的客户端激活（Client hydration）。

当客户端使用 React 重新渲染页面时，需要将服务器端渲染已经获取的数据传递给客户端渲染的 store，以便在这些组件的生命周期中使用而不是重新获取这些数据。

我们需要使用 hydrate 函数来更新客户端 store：

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

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

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

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

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

6. 服务端和客户端处理 diff

因为在服务端和客户端获取的数据可能会不一致，我们需要在服务端和客户端都对组件进行 diff，来保证渲染一致性。

在服务端渲染结束后，我们需要将当前 store 的状态与服务端渲染时的状态进行比较，以确保它们是一致的：

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

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

在客户端，我们也需要对服务端渲染的数据进行处理：

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

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

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

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

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

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

示例代码

可以通过以下仓库获取示例代码：

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

访问 http://localhost:3000/ 即可查看示例应用。

结束语

使用 redux-ssr-fetch 能大幅度简化服务端渲染时的异步数据请求流程，提高代码的可维护性和可读性，可以是一种非常好的方式提高 React 应用的渲染性能。

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

阅读全文

猜你喜欢

  • npm 包 @_pearofducks/webpack-plugin-serve 使用教程

    Webpack 是 Web 应用程序打包工具，它可以将多个 JavaScript 文件打包成一个可运行的 Web 应用。而 @_pearofducks/webpack-plugin-serve 是一个...

    4 年前
  • npm 包 webpack-eval-loader 使用教程

    在前端开发过程中，使用构建工具可以大大提高开发效率和代码质量。webpack 是当前最流行的前端构建工具之一，而 webpack-eval-loader 可以帮助我们更方便地调试 webpack 打包...

    4 年前
  • npm 包 webpack-everflow-config 使用教程

    对于前端工程师来说，webpack 是一个非常重要的工具，它可以将各种资源进行打包和优化，使得我们的网站加载速度更快、体验更好。而对于复杂的前端项目来说，webpack 的配置也变得相当复杂。

    4 年前
  • npm 包 webdanfe 使用教程

    前言 作为前端开发人员，我们通常会需要生成电子发票或网上增值税发票（即“电子普通发票”），其中关键的一步是根据业务数据生成发票文件。这个过程可能需要实现多项“电子发票”规范中的要求，例如：数据格式、签...

    4 年前
  • npm 包 webdash-performance-budget 使用教程

    在前端开发中，性能是非常关键的指标之一。为了确保我们的应用程序在性能方面有所提升，我们可以使用 webdash-performance-budget 这个 npm 包。

    4 年前
  • npm 包 webm-byte-stream 使用教程

    简介 WebM 是一种打包 WebM 视频格式的格式，它包含了带有 WebM 视频文件的注释和元数据。npm 包 webm-byte-stream 提供了一种将 WebM 视频转换为字节流的解决方案，...

    4 年前
  • npm包 webmake-coffee 使用教程

    简介 在前端开发中，为了提高开发效率，很多开发者会选择使用NPM包管理工具，并且在项目开发中，往往需要使用各种各样的NPM包。本文将介绍一款NPM包——webmake-coffee，并详细讲解如何使用...

    4 年前
  • 使用 webpack-extract-translation-keys-plugin 提取多语言文本

    在开发多语言前端应用程序时，必须将所有文本转换为可翻译的变量。对于大型项目，这可能会变得非常繁琐。解决这个问题的一种方法是使用 webpack-extract-translation-keys-plu...

    4 年前
  • npm 包 webpack-extract-translation-keys-regex-plugin 使用教程

    前端国际化是现代 Web 开发中不可或缺的一部分，而 webpack-extract-translation-keys-regex-plugin 作为一个提取翻译文件中的字符串和正则表达式的 webp...

    4 年前
  • NPM 包 webpack-fatigue-embrace 使用教程

    webpack-fatigue-embrace 是一个易于使用的 NPM 包，它可以方便我们构建复杂的前端应用程序。本文将会给大家详细介绍这个包并且提供实用的示例代码。

    4 年前
  • npm 包 webpack-feature-flags-plugin 使用教程

    在前端开发中，我们常常需要开启或关闭一些功能，以调试、测试或发布的需求为由。而 webpack-feature-flags-plugin 就是为了方便开启或关闭 webpack 构建中的特性或功能而开...

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

    前言 webcrypto-shim-jon 是一个基于 webcrypto-shim 包所构建的，为浏览器中提供加密功能的 npm 模块。这个包允许开发者在没有原生浏览器提供加密功能的环境下使用加密 ...

    4 年前
  • npm 包 webcv 使用教程

    介绍 webcv 是一款基于 JavaScript 的图像处理工具，它提供了一系列的方法和函数帮助开发者处理和操作图像。该工具是基于 OpenCV 开源计算机视觉库实现的，所以具有良好的可扩展性和灵活...

    4 年前
  • npm 包 webdash-readme-preview 使用教程

    Webdash 是一款基于浏览器的可视化开发工具，可以帮助开发者更方便快捷地构建 Web 应用程序。 webdash-readme-preview 是一款 Webdash 插件，它可以在 Webdas...

    4 年前
  • npm 包 webdav-fuse 使用教程

    什么是 webdav-fuse？ webdav-fuse 是一款使用 FUSE（Filesystem in Userspace）技术实现的用户空间文件系统。通过 webdav-fuse，我们可以将 W...

    4 年前
  • npm 包 webdav-sync 使用教程

    WebDAV 是一种基于 HTTP 实现的文件传输协议，它可以让我们通过 WebDAV 客户端与服务器上的文件进行交互。 webdav-sync 是一个可以使用 WebDAV 协议同步文件的 npm ...

    4 年前
  • npm 包 webpack-file-transform-plugin 使用教程

    在前端开发中，webpack 是一个非常重要的工具，它可以将多个模块打包成一个文件，便于网站的访问和管理。而对于一些特定的需求，我们可能需要对打包后的文件进行一些自定义的处理，这时候就需要使用到 we...

    4 年前
  • npm 包 webpack-fingerprint 使用教程

    前言 在前端开发过程中，我们常常需要对我们的代码进行打包。webpack 便是一位优秀的代码打包工具，而 webpack-fingerprint 则是 webpack 的一个很有用的插件，可以为我们提...

    4 年前
  • npm 包 webpack-fix-default-import-plugin 使用教程

    Webpack-fix-default-import-plugin 是一个 webpack 插件，可用于自动生成缺失的默认导入语句。当我们在使用一些库时，不免会有遗漏了默认导入语句的情况，这会导致一些...

    4 年前
  • npm 包 webpack-flow-template 使用教程

    在前端开发中，自动化构建工具已经成为了必要的工具。其中热门的构建工具之一就是 webpack。Webpack 可以处理各种类型的资源，包括 JavaScript、CSS、图片和字体等。

    4 年前

相关推荐

    暂无文章