Redux 中如何设置应用程序的主题-JavaScript中文网-JavaScript教程资源分享门户

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。这是一个示例代码：

function changeThemeScheme(scheme) {
    return {
        type: 'theme/scheme/changed',
        payload: {
            scheme,
        },
    };
}

Selectors

最后，我们需要编写 Selector 来从应用程序状态中选择主题小部件需要的数据。Selectors 是从应用程序状态中获取数据的纯函数。它们从 Redux Store 中选择数据并返回部分数据对象。对于这个示例，我们可以使用 createSelector 函数来选择当前主题的方案。这是一个示例代码：

const schemeSelector = (state) => state.theme.scheme;

export const selectCurrentScheme = createSelector(schemeSelector, (scheme) => scheme);

示例代码

下面是完整的 Redux 主题示例，包括 Action、Reducer 和 Selectors。

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

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

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

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

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

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

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

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

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

结论

使用 Redux 来更改应用程序主题可以使我们更轻松地控制应用程序的视觉体验。在 Web 应用程序中实现更丰富的主题功能，这是一个非常不错的策略。使用 Redux，我们可以清楚地划分界限，将不同的代码组织在不同的模块中，以便于维护。同时，我们也可以使用方便的 Redux 中间件来更改主题时触发效果。

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