前言
在开发过程中，我们会经常需要利用redux-devtools来调试redux应用的状态。redux-devtools可以让我们清晰地了解应用整体的状态，并可以修改状态并回放state的变化。但是，当redux状态较为庞大时，在redux-devtools中进行状态的修改和复制需要手动操作，效率较低，并且经常容易出错。因此，我们可以利用npm包redux-devtools-clipboard提高redux-devtools的调试效率，下面就来详细介绍如何使用redux-devtools-clipboard。
安装
执行以下命令进行redux-devtools-clipboard的安装：
npm install --save-dev redux-devtools-clipboard
安装成功后，在redux-devtools的设置中可找到“clipboard”选项卡。这个选项卡提供了两个按钮：“Copy State”和“Clear Clipboard”。
使用方法
在redux-devtools的框架中，使用redux-devtools-clipboard需要引入原有redux-devtools工具栏，并将其嵌套于redux-devtools-clipboard中，具体引入代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ ---------------- ---- ----------------
------ --------------------- ---- --------------------------
------ ----------- ---- -----------------------------
------ ---------- ---- ----------------------------
------ ------------- ---- ----------------------
------ ---------- ---- -------------
------ ------------- ---- -------
------ -------- ---- ------------
------ ---------------- ---- --------------------------
----- -------- - ---------------
------------
----------------------------
--------------------------
------------------------
------------------
-
----------- ---------------- --
--------------
-
------ ------- -------- ----- -
----- ----- - --------------------- ----------------------
------ -
--------- --------------
-----
--------- --
------------------
--------- --
-------------------
-------------- --
------
-----------
-
-在这个例子中，“ClipboardMonitor”提供了对“Copy State”和“Clear Clipboard”按钮的响应。同时，在“DevTools”组件外部包裹一个“ClipboardMonitor”组件，来嵌套原有的“DevTools”组件，代码简单清晰。
当然，为了让redux-devtools-clipboard的使用效果更好，还可以进行一些额外的配置。在调用createDevTools方法时，可以添加预置的monitors，并添加“clipboard”选项卡。下面是示例代码：
-- -------------------- ---- -------
----- -------- - ---------------
------------
----------------------------
--------------------------
------------------------
------------------
-
----------- ---------------- --
-------------- --
----------------- --
--------------
-在这个预配置中，我们添加了“LogFileMonitor”和“SliderMonitor”，同时在“DockMonitor”中预置了“ClipboardMonitor”。
总结
redux-devtools-clipboard让我们在使用redux-devtools时，使用起来更加方便，省去了手动复制、粘贴的步骤，同时提高了效率。本文详细介绍了redux-devtools-clipboard的用法，并提供了示例代码。希望对你学习redux的过程有所指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b40