npm 包 redux-preheat 使用教程

在 React 应用中，使用 Redux 管理状态是一种非常流行的方式。然而，在初始加载时，如果没有预取数据，渲染的页面可能会出现闪烁的现象。而 Redux-preheat 这个 npm 包则可以用来解决这个问题。

什么是 Redux-preheat

Redux-preheat 是一个可以预取 Redux 数据并将其保存在本地存储中的 npm 包。

安装

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

创建预取器

Redux-preheat 提供了 createPreheatMiddleware 方法来创建一个预取器。在创建预取器时，需要传入一个包含以下属性的配置对象：

  • reducerKey - 指定保存预取数据的 reducer 的键。
  • actions - 一个对象，它包含所有需要预取的动作创建器。
  • shouldPreheat - 一个函数，用于判断是否需要预取数据。如果返回 true，则预取动作将被调用。
------ - ----------------------- - ---- ----------------

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

将预取器添加到 Redux 中间件

将预取器添加到 Redux 中间件中。

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

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

预取数据

在服务器上，在渲染应用程序之前，使用 Redux 的 thunk 中间件可以调用预取动作。 使用 dispatch 函数调用 fetchUser 动作，然后将状态添加到上下文对象中，以便在应用程序中使用。 在这个例子中，数据将被保存在 window.__PRELOADED_STATE__ 中。

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

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

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

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

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

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

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

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

在客户端上，从服务器端渲染的预取数据可以由 Redux-preheat 检测到并导入到客户端的 Redux Store 中。

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

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

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

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

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

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

示例代码

完整的示例代码可以在 GitHub 仓库 中找到。

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

阅读全文

猜你喜欢

  • npm 包 webpack-hot-server 使用教程

    webpack-hot-server 是一个可以自动重新启动 Express 服务器的 webpack 插件，本教程将详细介绍如何使用该插件。 简介 有时候我们在进行前端开发时，需要编写一个 Ex...

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

    在前端网站开发中，Webpack 是一个流行的用于打包 JavaScript 模块的构建工具。webpack-html-plugin 是一个非常有用的 npm 包，它可以帮助我们将打包后的 JavaS...

    4 年前
  • npm 包 webpack-html-plugin-reload 使用教程

    前言 在前端开发中，使用 webpack 打包工具已经是大势所趋，而 webpack 的插件生态也因此得到了大量的发展和维护，其中 webpack-html-plugin-reload 这个插件可以说...

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

    在现代化的 Web 开发中，前端前后端分离的架构越来越受到欢迎。在这种架构中，前端负责 UI 的设计和开发，而后端则负责数据处理和业务逻辑。然而这种分离式的开发方式在许多情况下会带来新的挑战，例如前端...

    4 年前
  • npm包webmiddle-service-arraymap使用教程

    简介 webmiddle-service-arraymap是一个npm包，用于进行数组的映射操作。它提供了一系列方法用于对数组进行转换、过滤、排序、去重等操作，并支持自定义函数进行处理。

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

    Webpack 是前端开发中常用的打包工具，而 webpack-hot-2048-loader 是一个能够实现热更新的 loader，能够帮助前端开发者提高开发效率。

    4 年前
  • npm 包 webpkg 使用教程

    简介 Webpkg 是一个基于 Node.js 的前端自动化构建工具，能够管理、打包和优化 JavaScript、CSS、图片等资源文件。使用 Webpkg 可以提高前端开发效率，减少不必要的手动操作...

    4 年前
  • npm 包 webplate-cli 使用教程

    前言 在前端开发中，我们经常使用各种工具来简化开发流程，提高效率。其中一个很重要的工具就是 webplate-cli。webplate-cli 是一个轻量的脚手架，它可以快速创建基于静态站点的网页项目...

    4 年前
  • npm 包 webdismay 使用教程

    什么是 webdismay? Webdismay 是一款著名的开源 npm 包（也可以说是一个 npm 命令行工具），它可以检测网站的可用性。该工具可以检查网站的速度，搜索引擎优化（SEO）以及网站的...

    4 年前
  • npm 包 webplay 使用教程

    前言 随着 Web 技术的不断发展，前端已经成为了互联网技术中不可或缺的一部分。而在前端开发中，常常需要使用许多功能丰富，易于使用的库和框架来加速开发进度。本文将介绍一个常用的 npm 包 webpl...

    4 年前
  • npm 包 webmiddle-service-cheerio-to-json 使用教程

    什么是 webmiddle-service-cheerio-to-json webmiddle-service-cheerio-to-json 是一个 npm 包，用于将 cheerio 生成的 DO...

    4 年前
  • npm 包 webmiddle-service-browser 使用教程

    简介 webmiddle-service-browser 是一个 npm 包，提供在浏览器中和服务器端执行 JavaScript 脚本的能力。使用此包，您可以将浏览器视为无头浏览器来获取网站上的数据，...

    4 年前
  • npm 包 webmiddle-service-cheerio-to-virtual 使用教程

    在现代前端开发中，我们经常会遇到需要从网页中提取数据的需求。此时，使用一个强大的工具库——cheerio，可以方便快捷地实现这一目标。但是，如果需要进一步地处理这些数据，将其转换为 virtual-d...

    4 年前
  • npm 包 webmiddle-service-http-request 使用教程

    简介 webmiddle-service-http-request 是一个基于 Node.js 的 npm 包，可以用来发出 HTTP 请求获取远程数据。它可以使用不同类型的请求方式（GET、POST...

    4 年前
  • npm 包 webmiddle-service-jsonselect-to-json 使用教程

    Webmiddle 是一种前端爬虫工具，它能够帮助我们爬取网页信息，并对其进行处理和转换。其中，webmiddle-service-jsonselect-to-json 是一个可以将 JSONSele...

    4 年前
  • npm 包 `webmiddle-service-jsonselect-to-virtual` 使用教程

    简介 webmiddle-service-jsonselect-to-virtual 是一个基于 jsonselect 的 npm 包，能够将 JSON 数据转换为 webmiddle 的虚拟节点树，...

    4 年前
  • npm 包 webmiddle-service-parallel 使用教程

    前言 在前端开发中，我们经常需要进行网络请求，但由于网络请求的耗时等因素，我们可能需要进行并行处理，以提高效率和性能。而 webmiddle-service-parallel 这个 npm 包，可以帮...

    4 年前
  • npm 包 webmiddle-service-resume 使用教程

    简介 webmiddle-service-resume 是一个基于 Node.js 的 npm 包，主要用于生成简历 PDF 文件。通过 webmiddle-service-resume，用户可以编写...

    4 年前
  • npm 包 webmiddle-service-virtual-to-json 使用教程

    前言 webmiddle-service-virtual-to-json 是一个可以将 JavaScript 对象转换为 JSON 格式的 npm 包。该包主要面向前端开发人员，在前端开发过程中经常需...

    4 年前
  • npm 包 webmidiapishim 使用教程

    在前端开发过程中，我们有时需要通过 MIDI 设备控制网页上的元素。Web MIDI API 是浏览器提供的用于处理 MIDI 设备的 API，但是该 API 只能在支持的浏览器上使用，且使用起来有一...

    4 年前

相关推荐

    暂无文章