在 React 开发中,Redux 是一种用于管理应用程序状态的强大工具。Redux 的创立使得应用程序状态的管理变得更加简单、可预测和可控。在 Redux 中,唯一可以修改应用程序状态的方法是发出操作(action)。当操作发出时,Redux 会派发给存储状态的 reducer 函数。reducer 函数基于操作的类型更新存储状态,以便反映最新的应用程序状态。然而,在 Redux 开发中有时会出现难以调试的错误。因此,Redux 提供了一个严格模式(strict mode)来帮助开发人员更好地调试应用程序。
Redux 严格模式是什么
Redux 严格模式是一种开发者工具,它提供了一个严格的应用程序执行环境。当开启严格模式时,Redux 会对应用程序执行进行严格的限制。如果应用程序执行中触发了可疑的操作,Redux 将会发出一个警告信息,让开发者能够更好地调试应用程序。严格模式会对执行性能产生一些影响,所以只应该在开发和调试阶段开启它。
如何在 Redux 中开启严格模式
开启 Redux 严格模式很简单,只需要在创建 store 对象时,将 enhancer(增强器) 参数设置为 applyMiddleware() 函数的第三个可选参数即可:
-- -------------------- ---- ------- -- --------- ------ - ------------ --------------- - ---- ------- ------ ----- ---- ------------- ------ ------ ---- -------------- ------ ----------- ---- --------------- -- -- ------ --- ----- ----------- - ------- ------- -- ---- ----- ----- ----- - ------------ ------------ -------------------------------- ----------------------------------- -- ------------------------------------- -
在上述代码中,我们在 applyMiddleware() 函数的第三个可选参数中开启了 Redux 严格模式。开启严格模式后,在执行出现问题时会更容易发现问题。下面是一个示例,来演示在使用严格模式后,Redux 如何发现这些问题。
一个例子
假设在我们的应用程序中,有一个计数器组件。计数器组件使用 Redux 中的 state 来管理计数器的值,而且支持我们增加或减少计数器值。我们的代码看起来像这样:
-- -------------------- ---- ------- ------ ------ - --------- - ---- ------- ------ - ------- - ---- ------------- ------ - ---------- --------- - ---- ------------ ----- ------- ------- --------- - -------- - ----- - ------ ---------- --------- - - ---------- ------ - -- ------- ------------------------------- -------------------- ------- ------------------------------- --- - - - ----- --------------- - ------- -- -- ------ ------------ -- ----- ------------------ - - ---------- ---------- - ------ ------- ------------------------ ----------------------------
现在,我们已经创建了组件并连接到 Redux,但是我们有一个问题:当我们尝试去减小计数器的值到达 0 时,它却能够继续减少,一直到变成了负数。这是一个错误,我们需要一个方法来验证这个问题。作为一种解决方法,我们可以开启 Redux 严格模式并从控制台查看警告信息。
首先,我们需要在创建应用程序的 store 时开启严格模式。在下面的代码中,我们添加了一个中间件,用于检测应用程序中的问题:
-- -------------------- ---- ------- ----- ----------- - ------- ------- -- ---- ----- ------ ----- ---- ----- ----- - ------------ ------------ ------------------------------- -------- --------- -------- -- - ------ -------------- - ------ ---------------- - ----- --------- - ---------- ----- ------ - ------------ ----- --------- - ---------- ----- --------- - ------------------------ - ---------------- -- ---------- - -- - --------------------- --- ------- ---- ---------- -------- - ------ ------ - - --- ----------------------------------- -- ------------------------------------- -
在代码中,我们使用一个新的中间件 checker 来检查组件执行时的问题。在环境中开启 Redux 严格模式后,我们将捕捉错误并检测组件的状态。
现在,当我们测试应用程序并将计数器减少到 0 时,我们可以在控制台中看到以下警告信息:
Counter was changed by 1 value
Redux 掌握了我们更新的内容,并验证了计数器是否受到不正常的更改。而这正是 Redux 严格模式的目的。
结论
总结一下,Redux 严格模式可以帮助我们在开发和调试时更好地理解应用程序的行为。使用严格模式,我们可以发现有问题的操作,并从控制台中查看警告信息。开启 Redux 严格模式后,我们不会遇到隐藏问题和类似的困境,因此,强烈建议你在开发和调试过程中开启它。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6496760548841e98943a24bc