如何解决 Redux 中频繁重复的 actions 问题

当使用 Redux 管理状态时，我们经常需要定义一系列 actions 类型和对应的 action creators。但是在实际开发中，我们可能会发现有很多 actions 的定义只是同样的一些字段不同的变体。这会导致代码冗余和维护成本的增加。本文将介绍一种解决这个问题的方法。

问题分析

假设我们正在开发一个 Todo 应用，并需要定义三种 actions：添加任务、删除任务和完成任务。这些 actions 分别对应的类型是 ADD_TODO、DELETE_TODO 和 TOGGLE_TODO。

我们可以编写如下的 action creators：

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

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

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

这些 action creators 的实现都很相似，只有具体的 type 和 payload 不同。这样做会导致重复的代码和难以维护。

解决方案

我们可以将创建 action creators 的逻辑提取出来，编写一个函数来生成它们。比如：

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

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

这里的 makeActionCreator 函数是一个高阶函数，它接受一个 type 和一些参数名提供给 action creator，返回一个新的函数来生成 action。

我们可以看到，这种方式使得我们不用为每一个 action 再写一个 action creator，简化了代码。

示例代码

下面是一个完整的示例代码，展示了如何将上面的解决方案应用于一个简单的 Todo 应用：

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

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

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

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

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

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

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

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

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

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

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

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

结论

通过将创建 action creators 的逻辑提取出来，我们可以避免重复代码，减少维护成本。这个技巧可以用于任何 Redux 应用中，特别是那些需要管理多个状态的复杂应用。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670f23665f55128102630c15

阅读全文

猜你喜欢

  • 如何在 Hapi.js 中使用类和 ES6

    Hapi.js 是一个流行的 Node.js 框架，用于构建高效可靠的 Web 应用程序。它提供了一个灵活的插件架构和强大的路由器，使开发者可以快速、高效地构建 Web 应用程序。

    10 天前
  • CSS Grid 网格线过多导致页面过于复杂该如何优化

    介绍 CSS Grid 是一种新的布局方法，它可以帮助我们快速地创建复杂的布局。但是，有时候我们会发现在网格中使用过多的网格线会导致页面过于复杂，甚至出现一些奇怪的问题。本文将介绍如何优化这种情况。

    10 天前
  • Redis 缓存穿透问题和缓存雪崩问题的区别及解决方案

    简介 在 Web 开发中，缓存是一种常用的优化技术，通过将数据缓存在内存中，可以提高访问速度，减轻数据库负担。但是，缓存也会带来一些问题，比如缓存穿透问题和缓存雪崩问题。

    10 天前
  • GraphQL 进阶：如何处理错综复杂的数据模型

    GraphQL 是一种用于 API 的查询语言，它提供了一种更加高效、强大和灵活的方式来获取和处理数据。然而，在处理错综复杂的数据模型时，由于 GraphQL 的灵活性，我们可能会遇到一些挑战。

    10 天前
  • 在 Koa.js 中集成支付宝支付

    支付宝支付是目前国内流行度最高的支付方式之一，随着移动支付的日益普及，越来越多的企业和个人开始接入支付宝支付。在前端开发中，集成支付宝支付是非常必要的一项技能，本文将介绍如何在 Koa.js 中集成支...

    10 天前
  • Mongoose 到 MongoDB 数据库的连接问题

    在开发 Node.js 应用程序时，MongoDB 数据库是非常流行的存储方案之一。Mongoose 是一个用于 Node.js 的 MongoDB 对象建模工具，它允许我们在应用程序中定义模式和模型...

    10 天前
  • 使用 Mocha 测试框架测试 Node.js 中的 Express API！

    在现代 Web 开发中，前端和后端的工作通常是密不可分的。前端开发同样需要关注后端的质量和正确性。为了确保后端 API 的稳定，可测试性和正确性，前端开发者需要掌握一些测试技术。

    10 天前
  • 为什么通过使用 ARIA 标记来增强无障碍体验

    随着越来越多的人使用互联网，无障碍体验已经成为了不可或缺的一部分。特别是对于那些有残疾或者特殊需求的用户，无障碍体验显得尤为重要。而 ARIA，即可访问性富互联网应用程序标准，可以帮助我们更好地实现无...

    10 天前
  • AngularJS SPA 应用中如何优化路由性能？

    在现代 Web 应用中，单页面应用（SPA）已经成为主流，因为它们可以提供更好的用户体验，同时具有更好的性能和可维护性。而在 SPA 应用中，路由是非常关键的一部分，因为它决定了页面的加载和渲染，并影...

    10 天前
  • Server-sent Events 与长轮询（Long Polling）的异同点

    在现代的Web应用程序中，实时数据的传输和推送是至关重要的。实时的信息传输方式有很多种，比如WebSocket、Server-Sent Events（SSE）和长轮询（Long Polling）。

    10 天前
  • Serverless 架构设计之服务器架构

    Serverless 架构是一种新型的云计算模式，它消除了传统的服务器架构中需要设置和管理服务器的需求。相反，它通过自动扩展和弹性的架构为您提供无限的可伸缩性、更低的运行成本和更简单的维护管理。

    10 天前
  • Redux因历史趋势不断飞升，因不喜欢它而不使用它，后悔吗？

    Redux是一种流行的JavaScript状态容器，它广泛应用于React应用程序。Redux提供了一种管理状态的可预测方式，使得多个组件可以共享同一个数据源。但是，随着时间的推移，有些人却不再喜欢使...

    10 天前
  • 在 React Native 中运用 Enzyme 进行组件渲染测试指南

    什么是 Enzyme？ Enzyme 是一个流行的 JavaScript 测试工具，它可以用于测试React 和 React Native 的 UI 组件。它有助于加快组件测试的速度和准确度。

    10 天前
  • GraphQL 在 React Native 框架中的应用实践及常见问题

    GraphQL 是一种用于 API 的查询语言，是一个与语言无关、被定义为标准的数据查询和操作语言。GraphQL 在前端中，尤其是在 React Native 框架中得到了广泛的应用。

    10 天前
  • Koa.js 应用程序中的访问控制

    Koa.js 是一个非常受欢迎的 Node.js Web 框架，它的特点在于相比于其他 Web 框架更加轻量级，同时让中间件的使用变得更加简化。在一个典型的 Koa.js 应用程序中，经常需要实现访问...

    10 天前
  • 用 Tailwind CSS 打造一个精美的后台管理界面

    如果你是一位前端开发者，相信你无需对 Tailwind CSS 这个库进行过多的介绍。它是一个集成了多个 CSS 工具的库，让开发必须的样式能够更快、更简单的实现。

    10 天前
  • Vue.js 项目如何接入支付宝和微信支付？

    Vue.js 是一种流行的前端框架，它提供了一种灵活的方式来构建 Web 应用程序。如果你正在开发一个 Vue.js 项目，并且需要添加支付功能，那么你可能需要考虑如何接入支付宝和微信支付。

    10 天前
  • MongoDB 中如何使用聚合操作

    在 MongoDB 中，聚合操作是非常重要的一种操作方式，它可以让我们通过一些复杂的数据处理逻辑来获取我们需要的结果。本文将详细介绍 MongoDB 中如何使用聚合操作。

    10 天前
  • 在 Cypress 中进行无头浏览器测试

    Cypress 是一个流行的前端自动化测试框架，它提供了一个易于使用的 API 和一个友好的交互式测试运行器。它还支持多种浏览器，包括 Chrome、Firefox 和 Electron。

    10 天前
  • 如何使用 TypeScript 重构 React 应用程序

    在使用 React 开发应用程序时，许多开发者会使用 TypeScript 作为其语言，以改进应用程序的可维护性和可读性。TypeScript 是一种由微软开发的静态类型检查器，它可以让开发者在代码编...

    10 天前

相关推荐

    暂无文章