Redux 是一个 JavaScript 应用程序状态容器，可以用于管理应用程序中的状态和行为。Redux 中的状态以单一的、不可变的全局对象呈现，可以通过发送一个描述已发生事件的简单对象来更新。Redux 可以使用一个包叫做 redux-plainify 来更方便地记录和调试应用程序状态。
redux-plainify 是什么？
redux-plainify 是一个能够将 Redux store 中的不可变对象转化为可读的 javascript 对象的工具库。redux-plainify 可以帮助我们更加直观地读取 Redux store 中的对象，方便我们进行状态管理。
如何安装 redux-plainify ？
redux-plainify 可以直接通过 npm 安装：
npm install redux-plainify --save-dev
如何使用 redux-plainify？
redux-plainify 的使用方法很简单，只需要通过 applyMiddleware 函数调用它就可以了。
import {applyMiddleware, createStore} from 'redux';
import plainify from 'redux-plainify';
const store = createStore(reducer, applyMiddleware(plainify));我们还可以设定 redux-plainify 的选项进行更多的配置。
const store = createStore(reducer, applyMiddleware(plainify({ maxNestedMatches: 1 })));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