npm 包 redux-devtools-themes 使用教程

介绍

redux-devtools-themes 是一个可以供 redux-devtools 使用的主题包，包含了多种主题风格，可以让你的 redux-devtools 更加个性化。

本文将介绍如何通过 npm 安装和使用 redux-devtools-themes。

安装

通过 npm 安装 redux-devtools-themes，你只需要在命令行中输入以下命令，即可将其作为依赖导入项目中：

npm install redux-devtools-themes

使用

我们将以 redux-devtools-extension 为例，演示如何使用 redux-devtools-themes。

首先在你的项目中，你需要引入 redux-devtools-extension 和 redux-devtools-themes：

import { composeWithDevTools } from 'redux-devtools-extension';
import { themes } from 'redux-devtools-themes';

在开发环境中，当你创建 store 时，可以传入一个可选的 composeEnhancers 参数，它让你使用 composeWithDevTools 来增强你的 store，并使用 composeWithDevTools 的默认配置（包括默认调用 redux-devtools 扩展工具）。

-- -------------------- ---- -------
----- ----- - -------------------- ------------- ---------------------
  -- ------- ---- ---------------- --------------
  ------ -----
  ----------- ---
  ---------------- -----
  ----- -------- -- -------------- ---------
  ----------- ---
  ---------- -----
  --------------- -
    ----------- ---- -- -- ----- -------------- -- --
  --
  ---------------
  -----------------
    --------------
    -----------
----

如果你想使用 redux-devtools-themes 的主题包，可以在上述配置的基础上做出如下修改：

const store = createStore(reducer, initialState, composeWithDevTools({
  ...options,
  theme: themes.dark // 指定你喜欢的主题包，比如这里使用了 dark 主题
}))

如果你不想使用安装好的主题包，你也可以自定义一个主题，以便满足你的需求：

import { base16Themes } from 'redux-devtools-themes';

const myCoolTheme = base16Themes[ 'atelier-cave-dark' ];

const store = createStore(reducer, initialState, composeWithDevTools({
  ...options,
  theme: myCoolTheme // 指定你自定义的主题
}))

你也可以在应用运行期间，使用 updateTheme 方法动态的更换主题包：

import { updateTheme } from 'redux-devtools-themes';

updateTheme(themes.monokai);

效果预览

下面是使用不同主题包（dark、monokai、ocean）所得到的效果：

结语

redux-devtools-themes 提供了多种主题风格，方便开发人员个性化使用，通过本文的学习和实践，你可以使用和自定义 redux-devtools-themes 主题包，让你的 redux-devtools 更加个性化和实用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67526