npm 包 re-reselect 使用教程

介绍

re-reselect 是一个用于 Redux 应用程序的缓存选择器库。它基于 reselect 库,并向其添加了记忆结果缓存和清除缓存的功能。对于 Redux 应用程序来说,使用 re-reselect 可以提高应用程序的性能和响应速度。

安装

你可以通过 npm 安装 re-reselect:

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

使用

re-reselect 提供两种类型的选择器:cachedSelector 和 createCachedSelector。

cachedSelector

cachedSelector 与 reselect 的 createSelector 类似,但是它增加了一个 clearCache 方法,用于清除缓存。

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

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

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

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

createCachedSelector

createCachedSelector 的用法也非常类似于 createSelector,它还提供了 clearCache 和 removeMatchingSelector 方法,用于清除缓存和删除匹配的选择器。

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

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

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

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

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

createCachedSelector 还支持缓存键,例如:

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

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

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

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

在此例中,mySelector 会根据传入的参数动态计算缓存的键。当使用特定键调用 clearCacheForKey 方法时,将清除特定键的缓存。

示例

下面是一个使用 createCachedSelector 的例子:

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

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

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

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

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

上述示例中,我们定义了两个选择器,分别提取产品列表和类别过滤器。我们使用 createCachedSelector 创建了一个新选择器 selectFilteredProducts,以此选择器和 filters.category 作为缓存键缓存已筛选的产品列表。此时,传入与上次不同的类别过滤器时,将清除特定键的缓存以计算新的选择器。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5f79603b7116197505561b3c


猜你喜欢

  • npm 包 figc 使用教程

    在前端开发中,我们经常需要使用配置文件存储一些参数。figc 是一款基于 JSON 配置文件的配置管理工具,可以帮助我们快速读取、修改以及管理配置文件。本文将详细介绍 figc 的使用方法,并带有示例...

    4 年前
  • npm 包 restjs 使用教程

    在前端开发中,后端 API 接口调用是很常见的需求,而使用 restful API 接口可以更好地对接后端数据。restjs 是一个基于浏览器的 HTTP 客户端库,可以方便地实现发送和处理 rest...

    4 年前
  • npm 包 pull-tobits 使用教程

    简介 pull-tobits 是一款基于 Node.js 平台的 npm 包,用于将任意文件转换为二进制流,并支持将二进制流恢复到原始文件。这个工具尤其适合前端开发者在实现文件上传、二进制数据处理等方...

    4 年前
  • npm 包 `jstransformer-nunjucks` 使用教程

    前言 在前端开发中,我们经常需要使用模板引擎来渲染页面。Nunjucks 作为一个功能强大,灵活且易于使用的模板引擎,广受前端开发者的喜爱。 但是,在使用 Nunjucks 时,我们常常需要手动编写 ...

    4 年前
  • npm 包 react-pager 使用教程

    前言 在前端开发中,我们经常会遇到需要分页展示数据的情况,这时候我们可以使用 react-pager 这个 npm 包来帮助我们快速实现分页效果。 安装 我们可以使用 npm 命令来安装 react-...

    4 年前
  • npm 包 jstransformer-styl 使用教程

    在前端开发中,样式表是不可或缺的一部分。而 styl 是一款时尚、动态和高效的 CSS 预处理器,使得开发者能够更容易地编写可维护和易于扩展的 CSS 代码。而 npm 包 jstransformer...

    4 年前
  • npm 包 phone-formatter 使用教程

    在前端开发中,格式化电话号码是一个常见需求。然而,不同国家和地区的号码格式有所不同,对于开发者来说,需要对每个国家或地区的格式有一定的了解并编写相应的代码。而 npm 上有一个非常实用的包,叫做 ph...

    4 年前
  • npm 包 jstransformer-twig 使用教程

    在前端开发过程中,我们经常需要使用模板引擎来渲染页面,使页面具有动态性。Twig 是一种流行的模板引擎,它被广泛应用于 PHP 语言中。在 JavaScript 中,可以使用 jstransforme...

    4 年前
  • npm 包 metalsmith-cache 使用教程

    在开发 web 前端项目时,我们通常会使用一些工具来优化我们的开发流程,其中,metalsmith 是一个静态站点生成器,可以帮助我们快速地生成静态网页。然而,metalsmith 生成网页的过程可能...

    4 年前
  • npm 包 twig-drupal-filters 使用教程

    简介 Twig-Drupal-Filters 是一款在 Node.js 环境下使用的模板引擎,它提供了 Drupal 内置的模板标签和过滤器,可以在 Node.js 中使用。

    4 年前
  • npm 包 KSS 使用教程

    前言 在前端开发过程中,规范的文档和注释对于代码可读性及项目维护都十分重要。而 KSS 正是一款优秀的生成前端样式注释文档的工具。本文将为大家介绍如何使用 KSS。

    4 年前
  • npm 包 @types/once 使用教程

    前言 在日常的前端开发中,难免遇到需要监听事件并且只监听一次的情况,这时候就需要使用第三方库 once。由于 TypeScript 和 JavaScript 的类型限制不同,使用 TypeScript...

    4 年前
  • npm 包 @types/shimmer 使用教程

    在 TypeScript 项目中,我们常常需要使用到各种类型声明文件来帮助编辑器理解我们使用的 JavaScript 库的 API。但有时我们会遇到一些库没有官方提供类型声明文件的情况,这时可以使用 ...

    4 年前
  • npm 包 @fimbul/valtyr 使用教程

    在前端开发中,前端验证是非常常见的需求。常规的验证方式有 HTML5 的表单验证和手动验证,但是这些验证方式往往不能满足需求的复杂度,比如需要实现异步验证或自定义规则验证。

    4 年前
  • npm 包 drupal-attribute 使用教程

    前言 随着前端技术的不断发展,现在的前端工程师要掌握一定的工具和技术栈,从而更好地开发出符合用户需求的网站或应用。其中,npm 是一个非常重要的工具,它可以让前端工程师轻松下载和管理各种 JavaSc...

    4 年前
  • npm 包 @types/brace-expansion 使用教程

    什么是 @types/brace-expansion ? @types/brace-expansion 是一款 TypeScript 类型定义文件,用于为 brace-expansion 提供类型声明...

    4 年前
  • 前端类技术文章 - npm 包 bonjour-hap 使用教程

    Bonjour-hap 是一个 nodejs 的插件,它是一个轻量级的 MDNS 协议的实现,可用于发现局域网内的服务。在 HomeKit 开发中,Bonjour-hap 也是一个重要的 npm 包,...

    4 年前
  • npm包fast-srp-hap使用教程

    前言 fast-srp-hap是一个用于加密和解密的npm包,它基于SRP(安全远程密码)协议实现,常用于前端应用的安全验证和数据加密。在这篇文章中,我们将深入探讨fast-srp-hap的使用教程以...

    4 年前
  • npm 包 chnl 使用教程

    前言 随着前端技术的不断发展,现在越来越多的开发者开始使用 npm 来管理和使用前端包。npm 是一个非常受欢迎的包管理工具,它提供了很多开发包,而 chnl 就是其中的一款非常实用的包。

    4 年前
  • npm 包 promise-controller 使用教程

    Promise 是 JavaScript 中用于处理异步操作的一种方式。虽然 Promise 可以更好的解决异步操作的回调地狱问题,但是在实际开发中我们还需要处理一些类似于请求并发限制、请求超时等问题...

    4 年前

相关推荐

    暂无文章