在 Web 开发中，Redux 是一个非常流行且强大的状态管理库。它提供了一个统一的状态管理方案，使得我们的应用程序结构更加清晰、可维护性更高。
然而，当我们面对更加复杂的应用程序时，调试 Redux 状态变得更加困难。这时，我们可以使用 Redux DevTools 来帮助我们调试 Redux 状态。Redux DevTools 是一个非常强大的浏览器插件，可以让我们在浏览器中实时监控 Redux 状态的变化。
但是，Redux DevTools 并不完全支持 IE8。在这种情况下，我们可以使用 redux-devtools-ie8 这个 npm 包来解决这个问题。
本文将为大家详细介绍如何使用 redux-devtools-ie8 包，并提供简单的示例代码。
安装 redux-devtools-ie8
要使用 redux-devtools-ie8 包，我们首先需要通过 npm 安装它。在终端中，输入以下命令来安装 redux-devtools-ie8：
npm install redux-devtools-ie8 --save
安装成功后，我们需要在我们的项目中引入 redux-devtools-ie8 包：
import { createDevTools } from 'redux-devtools-ie8';使用 redux-devtools-ie8
使用 redux-devtools-ie8 具体流程如下：
- 我们需要将 Redux DevTools 中提供的扩展与 createStore 函数包装起来，以便使用它监视 Redux 状态的变化。
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { createDevTools } from 'redux-devtools-ie8'; // 引入 redux-devtools-ie8 包
import * as reducers from './reducers'; // 引入我们的 reducers
// 先创建一个 DevTools 组件，作为监视 Redux 状态变化的窗口
const DevTools = createDevTools(<DebugPanel top right bottom key="ctrl-h" />);- 将创建的 DevTools 组件添加到我们的应用程序中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ - --- - ---- --------------- -- -------------
------ - -- -------- ---- ------------- -- ----- --------
------ - ------------ ---------------- ---------------- ------- - ---- --------
------ - --------------- ----------- ---------- - ---- --------------------- -- -- ------------------ -
-- ----- -------- ------- ----- -------
----- -------- - -------------------------- --- ----- ------ ------------ ----
-- ---- ---- ------------ -------- -----
----- ----------- - --------------------------
-- -------
----- ---------- - ---
-- -- ------- ----------- --
----- ----- - ------------
------------
--------
-------------------------------
---------------------
-
--
-- ------
-------
--------- --------------
-----
---- --
--------- -------------------- --
------
------------
-------------------------------
--- 在 IE8 中打开我们的应用程序，并打开控制台。此时，我们应该能够在控制台中看到 Redux DevTools 的输出，以及我们应用程序的状态变化。
示例代码
下面是一个简单的示例代码，演示了如何在应用程序中使用 redux-devtools-ie8 包：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ - ---------------- - ---- ---------------
------ - -- -------- ---- -------------
------ - ------------ ---------------- ---------------- ------- - ---- --------
------ - --------------- ----------- ---------- - ---- ---------------------
-- ----- -------- ------- ----- -------
----- -------- - -------------------------- --- ----- ------ ------------ ----
-- ---- ---- ------------ -------- -----
----- ----------- - --------------------------
-- -------
----- ---------- - ---
-- -- ------- ----------- --
----- ----- - ------------
------------
--------
-------------------------------
---------------------
-
--
-- ------
-------
--------- --------------
-----
----------------- --
--------- -------------------- --
------
------------
-------------------------------
--总结
本文介绍了如何使用 redux-devtools-ie8 包来监视 Redux 状态变化。我们首先需要安装这个 npm 包，然后将它与 Redux DevTools 结合使用，最后在应用程序中添加一个 DevTools 组件来监视 Redux 状态变化。
虽然 redux-devtools-ie8 包提供了一种解决 Redux DevTools 在 IE8 中不能使用的方式，但我们仍然强烈建议您尽可能使用更新的浏览器版本来进行开发和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b66