简介
在 React 的开发中，redux 作为一个状态管理的工具，一般都会被用到。redux-immutable-state-invariant 是一个可以帮助我们更好地 debug redux 应用程序的 npm 包，它可以帮助我们检测 redux state 中是否有可变的数据，以及非法的 action 调用。它在不损失性能的前提下，可以让我们更好地理解我们的代码执行过程，进而调试和完善代码。
安装
可以通过下面的命令来安装 redux-immutable-state-invariant：
npm install redux-immutable-state-invariant --save-dev
在生产环境中，一般不需要安装这个包。
使用
在使用 redux-immutable-state-invariant 时，需要在 src/index.js 中引入这个包，然后将其作为 applyMiddleware 的中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ------ --------------------------------- ---- ---------------------------------- ----- ------------ - --- ----- ----------- - ------- ------------------------------------- ----- ----- - ------------ ------------ ------------- ----------------------------------------------------- -- ------ ------- ------
示例
下面是一个简单的计数器示例，我们将使用 redux-immutable-state-invariant 来检查我们的 state 是否包含非法的数据。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ------ --------------------------------- ---- ---------------------------------- ----- ------------ - - ------ -- ------ ----- -- ----- ----------- - ------- ------------------------------------- ----- ----- - ------------ ------------ ------------- ----------------------------------------------------- -- ------ ------- ------
上面的示例中，我们定义了一个包含 count 和 title 两个字段的 state，其中 count 是一个数字，而 title 是一个字符串。然后，在 applyMiddleware 中加入了 redux-immutable-state-invariant 中间件，并传入了默认配置，然后我们将其作为参数传入 applyMiddleware(...middlewares) 函数中。
配置
redux-immutable-state-invariant 还提供了一些配置项，可以让我们自定义其表现方式，下面是一些常用的配置项：
isImmutable：一个函数，用来判断传入的值是否是不可变数据。ignore：一个正则表达式或者一个函数，用来忽略某些 action，从而避免警告。ignoreActionTypes：一个字符串数组，用来存储不需要被检查的 action type。
下面是一个例子：
-- -------------------- ---- -------
----- -------------------- - ----- -- -
-- --- --------- ----
--
----- ----------------- - ------ ------- ----- -- -
-- --- ------ ----
--
----- ----------- - -
------
-----------------------------------
------------ ---------------------
------- --------------------
------------------ ---------------------------
---
--总结
redux-immutable-state-invariant 是一个非常有用的 npm 包，它可以帮助我们更好地调试和完善 redux 应用程序，可以在确保代码性能的基础上，提供更好的开发体验。我们可以在需要进行状态管理时，引入这个包，并在 applyMiddleware 中使用它。同时，我们也可以根据自己的需要来自定义它的一些配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab7eb5cbfe1ea06107aa