npm 包 redux-plainify 使用教程

Redux 是一个 JavaScript 应用程序状态容器,可以用于管理应用程序中的状态和行为。Redux 中的状态以单一的、不可变的全局对象呈现,可以通过发送一个描述已发生事件的简单对象来更新。Redux 可以使用一个包叫做 redux-plainify 来更方便地记录和调试应用程序状态。

redux-plainify 是什么?

redux-plainify 是一个能够将 Redux store 中的不可变对象转化为可读的 javascript 对象的工具库。redux-plainify 可以帮助我们更加直观地读取 Redux store 中的对象,方便我们进行状态管理。

如何安装 redux-plainify ?

redux-plainify 可以直接通过 npm 安装:

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

如何使用 redux-plainify?

redux-plainify 的使用方法很简单,只需要通过 applyMiddleware 函数调用它就可以了。

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

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

我们还可以设定 redux-plainify 的选项进行更多的配置。

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

redux-plainify 的选项

redux-plainify 提供以下选项:

  • maxDepthMatches: 当对象嵌套达到指定深度后停止显示;默认值:7
  • showCircular: 是否显示循环引用;默认值:false
  • maxCircularMatches: 最多显示多少次循环引用;默认值:100
  • maxArrayLength: 最多显示数组多少个元素;默认值:200
  • maxObjectLength: 最多显示对象多少个属性;默认值:50
  • maxStringLength: 最多显示字符串多少个字符;默认值:1024
  • maxNestedMatches: 当某个属性嵌套达到指定深度后停止显示;默认值:2

我们可以根据实际情况自定义选项以便更好地满足我们的需求。

示例代码

下面是一个 Redux 的示例程序,我们可以运行该程序以了解如何使用 redux-plainify。

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

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

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

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

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

运行该代码之后,我们可以看到 console 中打印出的 state 已经被 redux-plainify 转化成了一个可读的 javascript 对象。

总结

Redux 是一个非常优秀的 Javascript 应用程序状态容器,用于管理应用程序中的状态和行为。redux-plainify 可以帮助我们更加直观地读取 Redux store 中的对象,方便我们进行状态管理。同时,redux-plainify 还提供丰富的选项以满足我们不同的需求。

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


猜你喜欢

  • npm 包 callbag-from-event-pattern 使用教程

    在前端开发中,经常会涉及到事件的监听和处理。而 callbag-from-event-pattern 就是一个 npm 包,它可以将事件转换为可被 Callbag 流处理的数据流。

    3 年前
  • npm 包 chameleon-library 使用教程

    在前端开发中,跨端开发是一个不断被提及和探究的主题。在这个背景下,chameleon-library 这个 npm 包应运而生,它可以让我们非常方便地进行跨端(Web/小程序/H5/Weex)开发。

    3 年前
  • npm 包 com.omarben.inappreview 使用教程

    什么是 com.omarben.inappreview? com.omarben.inappreview 是一款 npm 包,可以帮助前端开发人员快速实现应用内评论和评分功能。

    3 年前
  • npm 包 files-provider 使用教程

    在前端开发中,文件上传和下载是非常普遍的需求。npm 包 files-provider 就是为了帮助开发者更便捷地进行文件上传和下载而存在的。本文将详细介绍如何使用 files-provider 进行...

    3 年前
  • npm包babel-plugin-webpack-prefetch使用教程

    在前端开发过程中,webpack是一款非常好用的打包工具。同时,babel也是前端必备的工具之一,用于将ES6+的代码转换为向后兼容的JavaScript语法,从而得到更好的兼容性和可读性。

    3 年前
  • npm 包 electron-ads-block 使用教程

    前言 随着计算机和网络的发展,广告已经成为了我们日常生活中的一大困扰。针对广告的阻挡,已经成为了很多人的需求,有些人甚至采取了一些极端的方法,如使用 ad-block 等浏览器插件,或者直接修改 ho...

    3 年前
  • npm 包 vue-video-mark 使用教程

    简介 vue-video-mark 是一个基于 Vue.js 的视频标注组件,可以帮助开发者在前端页面中方便地为视频添加标注。 安装 通过 npm 安装: --- ------- ----------...

    3 年前
  • npm 包 @icebob/node-rdkafka 使用教程

    前言 Kafka 是一个分布式流数据处理平台,它由 Apache 软件基金会开发,提供了高吞吐量、容错性、可伸缩性等特性。而在前端领域,很多应用都需要和 Kafka 进行交互,这时候 @icebob/...

    3 年前
  • npm 包 easy-injectionjs 使用教程

    什么是 easy-injectionjs easy-injectionjs 是一个简单易用的 JavaScript 库,用于在浏览器端进行前端组件注入,它主要特点包括: 无第三方依赖,代码简洁 支持...

    3 年前
  • npm包 @sartios/business-cards 使用教程

    在前端开发中,为了提升开发效率和代码复用性,我们通常会使用一些优秀的第三方库和工具,其中npm包就是最常用的一种。在本文中,我们将介绍如何使用npm包@sartios/business-cards来生...

    3 年前
  • npm包@sartios/ui的使用教程

    介绍 @sartios/ui是一个基于React的UI库,提供了常用的UI组件,如按钮、输入框、表格等。 这个库优雅的解决了许多常见的web开发问题,例如响应式设计、多语言文本框和可自定义主题。

    3 年前
  • npm 包 echo-fecs-loader 使用教程

    什么是 echo-fecs-loader echo-fecs-loader 是一款基于 fecs 检查工具的 webpack 加载器,用于帮助前端开发者在构建过程中自动检查 JS 代码的质量和风格。

    3 年前
  • npm 包 react_0.14.9 使用教程

    React 是一款由 Facebook 开发的 JavaScript 库,用来构建用户界面。它非常流行,也是目前最受欢迎的前端框架之一。如果你没有使用过 React,那么推荐使用 npm 包 reac...

    3 年前
  • npm 包 node-process-metrics-prometheus 使用教程

    Node.js 是一种 Javascript 运行环境,用于编写服务器端应用程序。Node.js 使用事件驱动、非阻塞 I/O 模型,使得它非常适合面向数据密集型的实时应用程序。

    3 年前
  • npm 包 preact-cli-decss 使用教程

    前言 在前端开发中,CSS 样式是不可避免的一个重要部分。然而,CSS 又是一种非常不灵活的语言,很难像编写代码一样高效地编辑样式。为此,CSS 预处理工具逐渐流行起来,利用它们提供的高级语言可以方便...

    3 年前
  • npm 包 wcolor.js 使用教程

    wcolor.js 是一个用于处理颜色的 JavaScript 库,它提供了方便易用的 API,可以帮助你在前端项目中轻松地实现颜色的计算、转换等操作。 本文将为大家详细介绍 wcolor.js 的使...

    3 年前
  • NPM 包 mm-db 使用教程

    简介 mm-db 是一个轻量级的嵌入式数据存储系统,适用于 Node.js 资源限制较小的场景。它支持数据的 CRUD 操作、查询及索引,采用类 SQL 的语法进行数据查询。

    3 年前
  • npm 包 mm-record 使用教程

    在前端开发中,处理数据与数据存储是非常常见的任务。为了方便开发人员进行数据处理,许多开源的 npm 包的出现为我们带来了很大的便利。在这篇文章中,我们将介绍一个名为 mm-record 的 npm 包...

    3 年前
  • npm 包 mm-rethinkdb-schema 使用教程

    在前端开发中,我们经常会需要操作数据库,而 RethinkDB 是一款很好的数据库管理系统。mm-rethinkdb-schema 是一个 npm 包,它可以帮助我们更加简单地操作 RethinkDB...

    3 年前
  • npm 包 naive-mongo 使用教程

    前言 naive-mongo 是一个基于 Node.js 的 MongoDB 驱动程序,它提供了简单易用的 API,使得开发人员能够更加高效地与 MongoDB 进行交互。

    3 年前

相关推荐

    暂无文章