Redux 严格模式:又一利器助你精细化调试

阅读时长 5 分钟读完

在 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 时,我们可以在控制台中看到以下警告信息:

Redux 掌握了我们更新的内容,并验证了计数器是否受到不正常的更改。而这正是 Redux 严格模式的目的。

结论

总结一下,Redux 严格模式可以帮助我们在开发和调试时更好地理解应用程序的行为。使用严格模式,我们可以发现有问题的操作,并从控制台中查看警告信息。开启 Redux 严格模式后,我们不会遇到隐藏问题和类似的困境,因此,强烈建议你在开发和调试过程中开启它。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6496760548841e98943a24bc

纠错
反馈