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