Redux 中如何设置应用程序的主题
前言
在前端开发中，主题是项目视觉体验的一个重要组成部分。在 Web 应用程序中，根据用户设置和环境，我们需要能够快速轻松地更改应用程序的主题。Redux 是一个在 JavaScript 应用程序中管理状态的强大工具。本文将介绍如何在 Redux 应用程序中为主题设置 Action、Reducer 和 Selectors，并展示一个完整的示例。
介绍
一般来说，应用程序的主题可以包括颜色、字体、背景等。我们可能希望根据某些条件更改主题。例如，当用户更改语言设置时，我们可能希望更改应用程序的配色方案。在 Redux 应用程序中，我们可以使用 Action 触发器来更改应用程序的状态，这意味着我们可以使用 Action 创建器来描述应用程序中更改主题的操作。我们将状态定义为应用程序的 主题 状态。
Reducer
Reducer 是处理 Action 的函数，它根据 Action 的类型来更改应用程序的状态。在本例中，我们使用 type theme/scheme/changed 来表示更改应用程序主题。在 Reducer 中，我们为主题状态添加新状态，然后配置 Reducer，以响应更改特定状态的 Action。这是一个示例代码：
----- ------------ - -
------- --------
------- ---
--
-------- ------------------ - ------------- ------- -
------ ------------- -
---- ----------------------- -
----- - ------ - - ---------------
-- -------------- ---
-- ----------------- -
----- ---------- - -------------------------------
-------------------------------------------- --------------------------------
-------------------------------------- ---------------------------
-
------ - --------- ------ --
-
--------
------ ------
-
-上述 Reducer 将 state 更新为更改的主题方案。同时，根据应用程序的运行环境，我们可以动态地将样式表的变量值更新为应用程序的新主题。
Action
我们已经做好了 Reducer，接下来我们需要构建 Action Creator 来触发这个 Reducer。Redux 的 Action 是一种描述更改应用程序状态的对象。我们可以创建一个 ChangeThemeSchemaAction 来触发更改主题的 Reducer。这是一个示例代码：
-------- ------------------------- -
------ -
----- -----------------------
-------- -
-------
--
--
-Selectors
最后，我们需要编写 Selector 来从应用程序状态中选择主题小部件需要的数据。Selectors 是从应用程序状态中获取数据的纯函数。它们从 Redux Store 中选择数据并返回部分数据对象。对于这个示例，我们可以使用 createSelector 函数来选择当前主题的方案。这是一个示例代码：
----- -------------- - ------- -- ------------------- ------ ----- ------------------- - ------------------------------ -------- -- --------
示例代码
下面是完整的 Redux 主题示例，包括 Action、Reducer 和 Selectors。
------ - -------------- - ---- -----------
----- ------------ - -
------- --------
------- -
------ -
----------- ----------
----- ----------
--
----- -
----------- ----------
----- ----------
--
--
--
-- -------
-------- ------------------ - ------------- ------- -
------ ------------- -
---- ----------------------- -
----- - ------ - - ---------------
-- ----------------- -
----- ---------- - -------------------------------
-------------------------------------------- ---------------------------------
-------------------------------------- ---------------------------
-
------ - --------- ------ --
-
--------
------ ------
-
-
-- ------
-------- ------------------------- -
------ -
----- -----------------------
-------- -
-------
--
--
-
-- ---------
----- -------------- - ------- -- -------------------
------ ----- ------------------- - ------------------------------ -------- -- --------
------ - ------------- ----------------- --结论
使用 Redux 来更改应用程序主题可以使我们更轻松地控制应用程序的视觉体验。在 Web 应用程序中实现更丰富的主题功能，这是一个非常不错的策略。使用 Redux，我们可以清楚地划分界限，将不同的代码组织在不同的模块中，以便于维护。同时，我们也可以使用方便的 Redux 中间件来更改主题时触发效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67208a502e7021665e02b7cf