介绍
@mmajewski/store-devtools 是一个开源的 npm 包，提供了一个通用的 store 开发调试工具。它适用于任何实现了 Redux store 接口约定的状态管理库，并能够跟踪应用程序状态的变化。
本文将详细介绍如何安装和使用这个 npm 包。
安装
你可以通过 NPM 安装 @mmajewski/store-devtools：
npm install @mmajewski/store-devtools
使用
使用 @mmajewski/store-devtools 调试应用程序状态，需要先在应用程序中引入它：
import { createDevToolsMiddleware } from '@mmajewski/store-devtools';然后，在创建 store 的时候，将 createDevToolsMiddleware 作为第一个 Redux middleware 传递给 createStoreWithMiddleware 函数，如下所示：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------------ - ---- ----------------------------
------ - ----------- - ---- -------------
----- ----- - ------------
------------
----------------
--------------------------
-
--这个调试工具将会自动添加一个 DevTools 组件到页面上，无需另外配置。你可以通过浏览器的控制台打开调试工具，查看应用程序状态的变化。
在调试工具面板上，你可以看到：
- 状态的历史记录
- 改变状态的 action
- action 的详细信息
示例代码
本文提供一个示例代码，用于演示如何使用 @mmajewski/store-devtools 调试 Redux。
安装依赖
npm install react react-dom redux react-redux @mmajewski/store-devtools
创建 store
-- -------------------- ---- -------
-- ------------
------ - ------------ --------------- - ---- --------
------ - ------------------------ - ---- ----------------------------
------ - ----------- - ---- -------------
------ ----- ----- - ------------
------------
----------------
--------------------------
-
--创建 Reducer
-- -------------------- ---- -------
-- ---------------
------ - --------------- - ---- --------
------ - --------- ------------ ---------------------- ----------------- - ---- ------------
----- - -------- - - ------------------
-------- ---------------------- - --------- ------- -
------ ------------- -
---- ----------------------
------ --------------
--------
------ ------
-
-
-------- ----------- - --- ------- -
------ ------------- -
---- ---------
------ -
---------
-
----- ------------
---------- -----
-
--
---- ------------
------ ---------------- ------ -- -
-- ------ --- ------------- -
------ ----------------- ----- -
---------- ---------------
---
-
------ -----
---
--------
------ ------
-
-
------ ----- ----------- - -----------------
-----------------
-----
---创建 Action
-- -------------------- ---- ------- -- -------------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ ----- --------------------- - ------------------------ ------ ----- ----------------- - - --------- ----------- --------------- ----------------- ------------ ------------- -- --- ---------- - -- ------ -------- ------------- - ------ - ----- --------- --- ------------- ---- -- - ------ -------- ----------------- - ------ - ----- ------------ ----- -- - ------ -------- --------------------------- - ------ - ----- ---------------------- ------ -- -
创建组件
-- -------------------- ---- -------
-- ---------------------
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
------ - -------- ----------- ------------------- - ---- -------------
-------- ----- --------- ------ ---------------- -- -
----- ------------ -------------- - -------------
------ -
--
-----
------ ------------------ ----------- -- ------------------------------ --
------- ----------- -- -
------------------------------
------------------
---
--- ----
---------
------
----
----------------- ------ -- -
--- ------------
-----
-------- --------------- -------------- - -------------- - ------ --
----------- -- ----------------------------
-
-----------
-------
-----
---
-----
-----
------- ----------- -- -----------------------------------------------------------------------
------- ----------- -- -----------------------------------------------------------------------------------
------- ----------- -- -----------------------------------------------------------------------------
------
---
--
-
-------- ------------------------- ------- -
------ -------- -
---- ---------------------------
------ ------
---- ---------------------------------
------ ----------------- -- ----------------
---- ------------------------------
------ ----------------- -- -----------------
--------
----- --- -------------- ------- - - --------
-
-
-------- ---------------------- -
------ -
------ ------------------------------- ------------------------
----------------- ----------------------
--
-
------ ------- ------------------------------创建入口文件
-- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
------ --- ---- -------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--总结
通过本文的介绍，你现在应该已经掌握了如何使用 @mmajewski/store-devtools 调试 Redux 应用程序状态的技能。这个 npm 包可以大大提高开发调试效率，是前端开发工程师不可或缺的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731481e8991b448e93f9