Redux中的事件和操作是否存在1:1关系?

在Redux中,一个事件(Action)是一个普通的JavaScript对象,用于描述应用程序中发生的某些事情。而操作(Reducer)则是一个纯函数,接收当前状态和事件作为参数,并返回一个新的状态。但是,Redux中的事件和操作之间是否存在一对一的关系呢?本文将深入探讨这个问题。

事件和操作的定义

Redux中的事件是一个包含type属性的JavaScript对象。例如:

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

操作是一个纯函数,它接收当前状态和事件作为参数,并返回一个新的状态。例如:

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

事件和操作之间的关系

在Redux中,事件和操作之间并不存在一对一的关系。一个事件可以被多个操作所处理,而一个操作也可以处理多个事件。

例如,在Todo应用中,当用户添加一个新的待办事项时,可能需要更新两个不同的状态:待办事项列表和已完成事项列表。因此,我们需要编写两个不同的操作来处理这两个不同的状态:

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

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

可以看到,这两个操作都可以处理ADD_TODO事件,但是它们返回的状态是不同的。

如何设计事件和操作

因为事件和操作之间并不存在一对一的关系,所以在设计Redux应用程序时,需要按照功能来划分事件和操作,而不是按照数据模型来划分。这样可以更好地将代码组织成可重用、可维护的模块。

例如,在Todo应用中,我们可以将所有与待办事项相关的事件和操作放在一个单独的模块中:

-- --------

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

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

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

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

结论

在Redux中,事件和操作之间并不存在一对一的关系。一个事件可以被多个操作所处理,而一个操作也可以处理多个事件。因此,在设计Redux应用程序时,需要按照功能来划分事件和操作,而不是按照数据模型来划分。

示例代码:https://codesandbox.io/s/redux-demo-1-higdp

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/30676


猜你喜欢

  • AngularJS - Image "onload" 事件

    在 Web 开发中,图片的加载是常见的操作之一。通常情况下,我们需要在图片加载完成后执行某些操作,比如更新 UI 界面或执行其他 JavaScript 代码。AngularJS 提供了一个内置指令 n...

    6 年前
  • 如何从日期时间值中仅比较日期部分

    在前端开发中,经常需要使用日期时间值。有时候我们只需要比较日期部分而忽略时间部分,例如比较两个日期是否相等。本文将介绍如何从一个日期时间值中仅比较日期部分的方法。 1. 获取日期部分 JavaScri...

    6 年前
  • 使用 Google Analytics 追踪链接点击

    Google Analytics 是一款广泛使用的 Web 分析工具,能够帮助网站管理员了解访问者的行为和流量。其中一个常见的用例是追踪链接的点击,以便更好地了解用户的兴趣和行为习惯。

    6 年前
  • obj.length === +obj.length in JavaScript

    在 JavaScript 中,我们经常使用 length 属性来获取数组或字符串的长度。但是你知道吗?在比较 obj.length 和 +obj.length 时,两者的结果可能不同。

    6 年前
  • 使用 Select2 限制标签的数量

    在前端开发中,我们经常会使用 Select2 来实现下拉选择框和带有搜索功能的多选框。但是,在某些情况下,我们可能需要限制用户选择的标签数量,以便更好地控制数据的输入和输出。

    6 年前
  • 使用gulp.js编译HTML部分文件

    在前端开发中,我们经常需要将多个HTML文件合并成一个完整的页面,而这些HTML文件往往是分散在不同目录下的部分文件。使用gulp.js可以方便地完成这个任务。 安装gulp.js 如果您尚未安装gu...

    6 年前
  • JavaScript 中有类似于 string.isnullorempty() 的函数吗?

    在 C# 中,我们可以使用 string.IsNullOrEmpty() 函数来检查一个字符串是否为 null 或者空。但是在 JavaScript 中却没有这样的内置函数。

    6 年前
  • Dot dotdot dotdotdot 作为 JS 中的加载动画?

    在前端开发中,我们经常需要等待某个异步操作完成后再进行下一步操作,比如数据获取、图片加载等等。为了提升用户体验,我们通常会在页面上添加一个加载动画,告诉用户程序正在努力工作中。

    6 年前
  • JavaScript 中百分号 (%) 的作用是什么?

    在 JavaScript 中,百分号(%)有两种不同的使用方式:模运算和字符串格式化。 模运算 模运算是指两个数相除后取余数的操作。例如: - - - -- -- -这里,5 除以 2 得到商为 2,...

    6 年前
  • 在本地文件系统上运行 Greasemonkey 脚本

    Greasemonkey 是一款著名的浏览器插件,它可以在网页上注入 JavaScript 代码,并改变页面的行为。但是,在某些情况下,我们可能需要在本地文件系统上运行 Greasemonkey 脚本...

    6 年前
  • script标签中不使用href="#"的原因与解决方案

    在前端开发中,我们通常会使用script标签来引入JavaScript文件。在HTML5中,可以使用以下方式: ------- ---------------------------------然而,...

    6 年前
  • lodash debounce not working in anonymous function

    Kristian Barrett提出了一个问题:lodash debounce not working in anonymous function,或许与您遇到的问题类似。

    6 年前
  • 如何在 jQuery UI 日历/日期选择器中使用“周”而不是“日”模式

    jQuery UI 是一个广泛使用的前端 JavaScript 库。它提供了一系列强大而易于使用的用户界面组件,其中包括日历/日期选择器。默认情况下,该组件以“日”模式显示日期,但有时需要以“周”模式...

    6 年前
  • 使用JavaScript如何填写表单字段并提交?

    在前端开发中,表单是非常常见的元素。在某些情况下,我们可能需要通过JavaScript来填写表单字段并提交表单数据。本文将介绍如何使用JavaScript来实现这个过程。

    6 年前
  • 如何检测Facebook JavaScript SDK是否成功加载?

    Facebook JavaScript SDK是开发人员在网站中集成Facebook平台功能的常见方法。但是,有时候我们需要知道Facebook JavaScript SDK是否已经成功加载,以便在后...

    6 年前
  • 将 JavaScript 数字转换为中文大写数字

    在前端编程中,有时需要将阿拉伯数字转换成中文大写数字来进行展示。本文将介绍如何使用 JavaScript 实现这个功能。 解决方案 我们可以通过将数字转换成字符串,然后处理字符串的方式来实现将数字转换...

    6 年前
  • 阻止父元素事件处理程序的执行

    在前端开发中,我们经常需要处理各种事件,例如鼠标点击、滚动等。但有时候,我们可能需要防止父元素事件处理程序的执行,以避免意外的行为发生。本文将介绍如何使用JavaScript和jQuery来实现阻止父...

    6 年前
  • 如何获取 jQuery $(this) 的 ID?

    在前端开发中,我们常常需要通过 jQuery 操作 DOM。而在使用 jQuery 时,$(this) 是一个非常常用的选择器。但是,有时我们也需要获取 $(this) 元素的 ID 值,来进行相应的...

    6 年前
  • 如何在 HTML5 中实现无需 Flash 的剪贴板复制?

    在Web开发中,经常需要在网页上实现一些剪贴板复制的功能,例如将某个文本或图片复制到用户的剪贴板中,方便用户进行下一步操作。在早期的 Web 开发中,常常使用 Adobe Flash 来实现这一功能,...

    6 年前
  • 如何将继承的对象转换为 JSON 字符串?

    在前端开发中,我们经常需要处理 JavaScript 对象与 JSON 字符串之间的转换。但是当我们要将继承自其他对象的对象转换为 JSON 字符串时,可能会遇到一些问题。

    6 年前

相关推荐

    暂无文章