npm 包 redux-persist-2 使用教程

在现代前端开发中，状态管理是非常重要的一环。Redux 作为目前最受欢迎的状态管理器之一，得到了广泛的应用。但是，Redux 中的状态是存储在内存中的，当浏览器刷新或者用户关闭网页时，状态将会丢失。为了解决这个问题，我们可以使用 redux-persist-2 这个 npm 包，将 Redux 中的状态保存在本地存储中，实现持久化。

安装

使用 yarn：

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

或者使用 npm：

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

基本用法

使用 redux-persist-2 首先需要创建一个 persistReducer，传入一个由 Redux 的 combineReducers 返回的根 reducer 和一个配置对象。

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

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

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

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

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

其中，persistConfig 中的 key 属性指定了存储的 key 值，默认为 'root'，同时 storage 属性指定了存储方式，可以使用默认的 localStorage 或者自定义存储方式。

使用 persistStore(store) 函数将 Redux 的 store 和 persistor 关联起来，以便在建立 store 后进行状态的读取和持久化存储。

高级用法

Whitelist 和 Blacklist

可以通过配置 whitelist 或 blacklist 属性实现对指定 reducer 的数据进行存储或排除。例如，只存储 user 和 cart reducer：

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

或者排除 session reducer：

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

自定义获取和存储逻辑

redux-persist-2 默认会将所有状态值进行 JSON 序列化后存储，如果想要进行一些较复杂的序列化操作，可以使用自定义的 transformers。例如，我们需要将一个对象的日期类型转换为字符串类型：

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

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

自定义存储引擎

如果需要使用其他存储引擎，可以实现 redux-persist-2 的 Storage 类型接口。例如，使用 IndexedDB 存储数据：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

示例代码

完整的代码示例可参考以下代码：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是 redux-persist-2 的使用教程和示例代码，希望对你的学习和实践有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 webmarkelov-number-formatter 使用教程

    webmarkelov-number-formatter 是一个专门用于格式化数字的 npm 包，它提供了方便易用的 API，可以帮助开发者快速实现数字的格式化。本文将介绍如何使用 webmarkel...

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

    简介 webdav-tulip 是一个用于支持 WebDAV 协议的 npm 包，它提供了一系列方便的 API，可以让你通过 WebDAV 协议来操作云端存储。 安装 首先需要安装 webdav-tu...

    4 年前
  • npm 包 webdilio-sm 使用教程

    随着前端开发的发展，我们需要使用越来越多的第三方库和插件。而 npm 包作为一个开源的包管理器，现已成为了前端开发中不可或缺的一部分。本篇文章将详细介绍 npm 包 webdilio-sm 的使用教程...

    4 年前
  • npm 包 webmd-spon-prog 使用教程

    在前端开发中，我们经常需要使用到一些优秀的第三方工具和库来提高开发效率和代码质量。npm (Node Package Manager) 是目前最流行的 JavaScript 包管理器之一，它可以让我们...

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

    在前端开发中，我们经常需要使用各种 npm 包来提高我们的工作效率。webmention-client 是一个非常实用的 npm 包，它可以帮助我们在网站中集成 Webmention 功能。

    4 年前
  • npm 包 webmerge 使用教程

    1. 前言 在前端开发中，我们经常需要将 HTML 模板和其他数据进行合并，生成一个渲染好的 HTML 文档。而这种任务可以通过使用 webmerge 这个 npm 包来实现。

    4 年前
  • npm包webmiddle的使用教程

    webmiddle 是一个基于Node.js的数据采集框架。它能够智能地提取和处理HTML、JSON、XML等类型数据，并将它们转换为可供分析和使用的结构数据。webmiddle 通过插件的形式扩展其...

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

    前言 在前端开发中，我们有时需要从网站中获取数据，同时也有自己定制化业务需求，需要把自有网站的数据上传到爬虫平台进行分析。本文介绍了一个非常方便的 npm 包 webmiddle-client，能够很...

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

    介绍 在前端开发中，我们经常需要进行 cookie 的相关操作，比如设置、获取、删除等等。webmiddle-manager-cookie 就是一个可以用来进行 cookie 操作的 npm 包。

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

    在前端开发中，使用webpack和hapi搭建项目是很常见的。但是每次都需要重新创建项目和配置webpack往往非常繁琐。而webpack-hapi-boilerplate就是为了解决这个问题而出现的...

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

    在现代的前端开发中，前端自动化工具是不可缺少的一部分。其中，Webpack 是一个广泛使用的自动化构建工具。Webpack 提供了许多有用的功能，其中最重要的是 Hot Module Replacem...

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

    前言 在前端开发中，我们经常使用 webpack 来打包代码，提高页面性能。一些高级特性，例如热替换（Hot Module Replacement, 简称 HMR），可以大大提高开发效率和交互体验。

    4 年前
  • npm 包 webpack-hot-dev-clients 使用教程

    前置知识 在介绍如何使用 npm 包 webpack-hot-dev-clients 的使用教程之前，我们需要先了解一下几个概念： Webpack 是什么？ Webpack 是一个前端打包工具，可...

    4 年前
  • npm 包 webdevjs 使用教程

    简介 webdevjs 是一个为前端开发者设计的 npm 包，目的在于简化前端开发中常用的任务。webdevjs 包含了许多常用的工具函数、库、CLI 等，不仅能够提高前端开发效率，还能够提升代码的可...

    4 年前
  • npm 包 webdict 使用教程

    前言 在前端开发中，我们常常需要对文本进行翻译或者对某些词汇进行查询。而 webdict 包就是这样一个 npm 包，它提供了一种在前端中方便地实现英文词汇翻译和查询的方法。

    4 年前
  • npm 包 WebDriverIO 使用教程

    本文将介绍如何使用 npm 包 WebDriverIO 进行前端自动化测试，包括安装、配置、API 等。通过学习本文，能够掌握如何使用 WebDriverIO 提高测试效率，提升前端工作流程。

    4 年前
  • npm 包 webdriven 使用教程

    介绍 Webdriven 是一个基于 selenium-webdriver 封装的 npm 包，提供了更加便捷的 API，可以方便地进行前端自动化测试。 安装 --- ------- --------...

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

    前言 对于前端开发人员来说，webpack 是一个非常流行的模块打包工具。而 webpack-hot-loader-zak 作为 webpack 中的一个常用 npm 包，可以帮助我们在开发阶段实现热...

    4 年前
  • npm 包 webpack-hot-middleware-ie8 使用教程

    在前端开发中，webpack 是一个非常流行的构建工具，该工具可以将代码进行打包，解决了前端开发时的依赖问题。而 webpack-hot-middleware-ie8 则是一个能够在 IE8 中支持热...

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

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

    4 年前

相关推荐

    暂无文章