npm 包 redux-undo-immutable 使用教程

redux-undo-immutable 是一个 npm 包，它是一个 redux 插件，支持在 redux 应用程序中实现撤销/重做功能。与其他 redux 插件不同，redux-undo-immutable 使得你可以很容易地管理不可变（immutable）的状态，同时也支持你撤销 / 重做异步的 redux 操作。redux-undo-immutable 支持对状态做出更改且保证数据的不可变性，提高了代码的可重复性。

安装

你需要先安装 redux-undo-immutable，在你的项目目录下执行以下命令：

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

使用

把 redux-undo-immutable 插件添加到你的 store 中，并在 actions 中添加撤销和重做的 action。

配置

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

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

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

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

添加撤销和重做的 action

使用 redux-undo-immutable 中提供的 ActionTypes 来获取撤销和重做的 actionType，然后在你的 action creators 中添加。

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

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

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

限制历史记录长度

使用 undoable() 的第二个参数 options 来限制历史记录长度。

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

过滤器

使用 undoable() 的第二个参数 options 来添加一个过滤器。

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

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

distinctState() 过滤器将忽略与之前存储的状态相等的动作。

示例代码

下面是一个完整的示例代码：

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

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

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

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

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

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

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

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

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

总结

使用 redux-undo-immutable 可以很容易地实现 redux 应用程序中的撤销/重做功能，并保证数据的不可变性。其提供了很多选项来定制历史记录，如限制历史记录长度、添加过滤器等。在开发中，我们可以根据业务需求，通过 redux-undo-immutable 实现更加优秀的 redux 应用程序。

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

阅读全文

猜你喜欢

  • npm 包 sprite-sass 使用教程

    在前端开发中，经常需要使用图片来实现各种视觉效果，例如图标、背景等等，而使用零散的图片文件并不方便统一管理和维护。这时候，我们就需要使用雪碧图（sprite）技术来将多张小图片合并成一张大图，并通过 ...

    4 年前
  • npm 包 sprite-spirit 使用教程

    前言 在前端页面的优化中，减少 HTTP 请求是一个非常关键的问题。而 CSS Sprites 技术就是其中的一种优化方案。它通过将多个小图标合成到一张大图上，然后通过 background-posi...

    4 年前
  • npm 包 sprite-timeline 使用教程

    前言 在前端开发中，动画效果的运用能够大大提升页面的交互性和用户体验，而使用 sprite-timeline 可以帮助我们更快捷、高效地实现各类动画效果。 本文将为大家详细介绍 npm 包 sprit...

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

    前言 在前端开发过程中，我们可能需要在一个 HTML 文件中嵌入另一个 HTML 文件的内容，这时候就需要用到服务器端包含（Server Side Include，简称 SSI）。

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

    前言 在前端页面中，我们经常需要使用雪碧图来优化性能。虽然我们可以通过手动合并图片来生成雪碧图，但是这样做非常繁琐且容易出错。而通过使用 npm 包 sprite-webpack-plugin，我们可...

    4 年前
  • npm 包 sprite.js 使用教程

    什么是 sprite.js sprite.js 是一个用于创建图像精灵的库，允许您动态编程创建图像精灵，它是一个基于 Canvas 的 JavaScript 库，作为一个轻量级的 tweening库，...

    4 年前
  • npm 包 srcds-rcon 使用教程

    在前端开发中，我们经常需要操作游戏服务器，例如查询服务器状态、更改服务器设置等等。而 srcds-rcon 是一款可用来连接和管理游戏服务器的 npm 包。在本文中，我们将会介绍如何使用 srcds-...

    4 年前
  • NPM 包 sshync 使用教程

    sshync 是一个基于 SSH 协议的文件同步工具。它可以帮助前端工程师快速、方便地将本地代码同步到远程服务器。它的操作简单易懂，功能强大，非常适合用于前端云端开发和部署。

    4 年前
  • npm 包 srcds-logs 使用教程

    npm 包 srcds-logs 是一个针对源引擎游戏服务器的日志解析工具，该工具可以解析源引擎游戏服务器的日志文件，并提取出有用的信息。该工具可以帮助服务器管理员更加方便地管理游戏服务器，同时也可以...

    4 年前
  • npm 包 srcgen 使用教程

    在前端开发中，代码生成工具是一个必不可少的利器。而 npm 包 srcgen 就是一个功能强大的代码生成工具，它可以让你更加高效地生成代码、模板和文档。在本文中，我们将介绍 srcgen 的使用教程，...

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

    前言 在前端开发中，我们经常需要使用一些静态网页，如纯 HTML 或者 HTML + CSS。而对于这种网页，如果需要使用一些动态功能，比如说引用公共头部、尾部或者侧边栏等等，那么就需要用到 SSI（...

    4 年前
  • npm 包 srcgrep 使用教程

    介绍 srcgrep是一个非常方便的npm包，可以帮助我们在代码库中查找特定的文本或正则表达式匹配项。无论从何处查找，包括源代码，配置文件或其他文档和存储库，其支持我们以非常易于使用和一致的方式快速查...

    4 年前
  • npm 包 ssi-http-parser 使用教程

    前言 在前端开发中，我们常常需要处理数据流，并且处理数据流的一种常见方式是使用 http。当我们需要从服务器端获取数据时，我们通常会使用 http 协议来请求数据。

    4 年前
  • NPM 包 SSI-CLI 使用教程

    SSI-CLI 是一个基于 Node.js 开发的命令行工具，用于在静态 HTML 文件中嵌入 Server Side Includes (SSI)。SSI 指令可用于在 Web 服务器上动态地生成 ...

    4 年前
  • npm 包 ssi-parser 使用教程

    如果你是一名前端工程师，可能会遇到需要在页面中使用 SSI (Server Side Includes) 语法实现代码复用或者其他功能的情况。而 ssi-parser 就是一个 npm 包，它能够帮助...

    4 年前
  • sqs-pipeline-lambda-receiver

    Reveiver module for sqs data pipelines sqs-pipeline-lambda-receiver Sender module for sqs data pipel...

    4 年前
  • npm包sqs-pipeline-lambda-reciever使用教程

    在云服务领域，AWS SQS是一个被广泛使用的消息队列服务，它可以帮助我们为分布式应用程序解耦消息处理的过程。但是，为了将消息处理到Lambda函数中，我们需要编写一些代码来驱动SQS并触发Lambd...

    4 年前
  • npm 包 sprite.styl 使用教程

    前言 对于前端工程师而言，实现网页元素雪碧图是必要的技能之一。但手动合并图片，生成 sprite 图片及对应的 CSS 样式表也是一项繁琐的工作。通过使用 npm 包 sprite.styl，可以在前...

    4 年前
  • npm 包 spritegen-sheets 使用教程

    介绍 在前端开发中，制作雪碧图是很常见的任务，它能够降低网站的 HTTP 请求数量，从而提升网站性能。而在制作雪碧图时，我们可以利用 npm 包 spritegen-sheets，实现自动的雪碧图生成...

    4 年前
  • npm 包 sqs-logger 使用教程

    在前端开发中，日志的收集和管理是非常重要的一项工作。在开发过程中，我们通常需要记录系统错误和用户操作行为等事件，以便后续的问题排查和数据统计。通过 npm 包 sqs-logger，我们可以很方便地实...

    4 年前

相关推荐

    暂无文章