npm包 redux-persistate 使用教程

在前端开发中，我们常常需要在不同的页面之间共享状态数据，比如用户登录信息、主题设置等等。为了避免重复发送请求，我们需要将这些数据持久化存储到本地。而redux-persistate就是一个为Redux状态树提供持久化的解决方案，下面将详细介绍npm包redux-persistate的使用方法。

安装

在项目中使用redux-persistate，首先需要使用npm进行安装。打开终端并输入以下命令：

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

配置

持久化 store 的配置

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

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

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

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

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

redux-persist 是通过对react的 setState 函数进行增强来实现对store进行持久化，对store进行增强需要引入 redux-persist 中的 persistReducer 函数。

persistReducer 函数接收两个参数，一个是配置信息，一个是 rootReducer 函数。

配置信息中，key属性表示持久化的键名，多个reducer持久化，则需要标明不同的键名，以便区分。

storage 属性表示使用哪种存储方式。

反持久化 store 的配置

反持久化store实际就是获取本地存储里的数据，然后结合reducer生成store：

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

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

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

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

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

持久化白名单&黑名单

有时我们会在store 中存储过多的数据信息，没有必要每个状态都需要做持久化，特定状态不做持久化，使用redux-persist 的封装的黑白名单配置即可实现。

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

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

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

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

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

示例

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

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

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

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

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

结语

以上就是redux-persistate的使用教程，使用redux-persistate可以方便地解决状态持久化问题，避免重复请求数据，提高应用程序的性能。同时，本文还分享了关于白名单&黑名单的配置方法，希望能对大家有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 split-at-cursor 使用教程

    在前端开发中，处理文本字符串是很常见的需求，如在输入框中通过光标位置将字符串拆成多个字符串，而 npm 上的 split-at-cursor 包就为我们提供了便捷的实现方案。

    4 年前
  • npm 包 sport-object-uploader-module 使用教程

    简介 sport-object-uploader-module 是一个基于 Node.js 的 npm 包，用于将文件上传到云存储对象存储服务中。本文将详细介绍如何使用该包完成文件上传操作。

    4 年前
  • npm 包 sport-object-viewer 使用教程

    介绍 sport-object-viewer 是一款可以展示运动数据的 npm 包。它可以将以对象形式存储的运动数据，通过可视化的方式展示出来。 安装 首先，需要在本地安装 sport-object-...

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

    许多前端开发者在进行页面优化或调试时需要获取网络请求的详细信息，然而，浏览器提供的开发者工具的信息有限。此时，使用 spy-server 这个 npm 包可以提供详尽的网络请求信息。

    4 年前
  • npm 包 spy-then 使用教程

    介绍 在前端开发中，我们经常需要使用 promise 对象来处理异步操作，而当我们需要在 promise 执行之前或者之后执行某些操作时，我们通常需要使用链式调用中的 then 方法。

    4 年前
  • npm 包 spy-web-client 使用教程

    简介 spy-web-client 是一个用于前端监控的 npm 包，可以帮助我们跟踪网页的浏览数据、错误信息和性能指标等。它是基于前端监控平台 Spy 开发的，让我们可以更加方便地对网站或者应用进行...

    4 年前
  • npm 包 spyder 使用教程

    npm 包 spyder 使用教程 在前端开发过程中，我们经常需要爬取网站数据，分析页面结构等操作。为了方便我们在 Node.js 环境下进行网页爬虫等操作，我们可以使用一个非常强大的工具，这个工具名...

    4 年前
  • npm 包 spye 使用教程

    Spye 是一个 JavaScript 库，它可以监视 JavaScript 对象、数组和函数的访问和修改行为。Spye 数组返回由特定方法调用、属性访问或函数调用产生的值的历史记录。

    4 年前
  • npm 包 spyes 使用教程

    介绍 Spyes 是一个小型的 JavaScript 库，用于窃听事件并返回它们的详细信息。它可以在任何 Web 应用程序中使用，可以方便地跟踪事件，调试代码以及进行数据分析。

    4 年前
  • npm 包 spyfu-vue-factory 使用教程

    前言 在前端开发中，Vue.js 已经成为了一个非常流行和实用的框架，特别是在构建单页面应用程序和组件化开发方面。随着 Vue.js 的越来越普及，社区中也涌现出了很多优秀的第三方库，这里介绍一款非常...

    4 年前
  • npm 包 `sports-live` 使用教程

    npm 是 JavaScript 的包管理器，允许我们轻松地在项目中安装、升级和删除各种 JavaScript 包。在前端开发中，我们通常使用包来处理数据、UI、路由、状态管理等方面的逻辑。

    4 年前
  • NPM 包 Sports_Table_Megadraft 使用教程

    Sports_Table_Megadraft 是一款可用于前端开发的 NPM 包，用于创建运动标签表的功能，很方便且易于使用。在这篇文章中，我将一步步介绍如何在你的项目中集成该包，以及如何使用它。

    4 年前
  • npm 包 sportsdata 使用教程

    前言 在前端开发中，经常需要使用到一些数据源，比如体育赛事数据。然而，这些数据不是直接可以从网上获取的，而是需要使用相应的 API 或者调用相应的数据包进行获取。这里介绍一个 npm 包——sport...

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

    在前端开发中，处理大量的文本是非常常见的需求。为了确保文本的正确性，我们通常会使用拼写检查工具来检查文本的准确性。而现在，我们可以使用一个名为 spell-check-cli 的 npm 包轻松完成拼...

    4 年前
  • npm 包 sportsfont 使用教程

    简介 sportsfont 是一个包含各种运动图标的字体库，可以方便地在网页中使用。该库提供了多种格式的字体文件，以及 HTML 、CSS 文件，可以通过 npm 安装并使用。

    4 年前
  • npm 包 spell-it 使用教程

    前言 在前端开发中，经常需要进行字符串处理，包括拼写检查、字符替换等。而 npm 上有很多优秀的包可以帮助我们完成这些工作。今天我们介绍的是一个拼写检查的 npm 包 spell-it。

    4 年前
  • npm 包 spell-me 使用教程

    前言 在前端开发中，拼写错误是一个常见的错误。有时候，程序员们可能无意间把变量名拼错，或者是写错了某个单词，在代码运行时，会出现各种奇怪的问题。这时候，使用一个拼写检查器是非常有必要的。

    4 年前
  • npm 包 spellbind 使用教程

    Spellbind 是一个强大的 JavaScript 库，它能够快速而准确地验证一个字符串是否符合一种语言的拼写规范。该库可以用于各种场景，如单词拼写检查、自动纠正等。

    4 年前
  • npm 包 spellcheck 使用教程

    在前端开发中，拼写错误是一个很普遍的问题。然而，很多开发者并没有一个好的拼写检查工具，这可能导致很多低级的错误和不必要的时间浪费。为了解决这个问题，我们可以使用 npm 包 spellcheck 进行...

    4 年前
  • npm 包 split-by 使用教程

    在前端开发的过程中，我们经常需要对字符串进行分割操作。而在 JavaScript 中，字符串的分割函数是 split。但是当我们需要分割的依据不是固定字符时，该如何操作呢？这时，我们可以使用一个 np...

    4 年前

相关推荐

    暂无文章