热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Redux观点之三:Action(行动)与ActionCreator(行动建立器)

这两个是Flux架构中的介入成员,Redux中有申明Action的定义:Actions(行动)是从你的运用送往store(存储)的信息负载你可能会一直在Action(行动)这里看到

这两个是Flux架构中的介入成员,Redux中有申明Action的定义:

Actions(行动)是从你的运用送往store(存储)的信息负载

你可能会一直在Action(行动)这里看到payload这个字词,它是负载有用数据的意义,这个字词的意义说明注解你能够看一下,不难理解:

Payload用在计算机科学的意义,是指在数据传输时的”有用数据”部分,也就是不包括传输时的头部信息或metadata等等用于传输其他数据。它的英文原本是指是飞弹或火箭的搭载的真正有用的负载部分,比方火药或核子弹头,别的的不属于payload的部分固然就是火箭传送时用的燃料或掌握零件。

这个Action是有一个牢固花样的,叫作FSA, Flux Standard Action(Flux规范行动),花样会像下面如许,是个Javascript的对象字面定义:

{
type: 'ADD_TODO',
payload: {
text: 'Do something.'
}
}

如许一个用于形貌行动的纯真对象字面定义,就称为Action(行动)。

为何要先写出明白的Actions(行动),也就是把一切的组件会用到的Actions(行动),悉数集合写到一个档案中?这也是个硬划定规矩,就像你假如列入奥运的体操比赛,每种项目都有划定的行动,在肯定的时间内只能作这些行动,按照表定运转。主要照样由于Redux并不知道你的运用程序里会作什么行动,须要有一个明白申明有哪些行动的处所,在运作时以这个对照表为基准。

固然,Actions(行动)必须要有type(范例),而且在同一个运用中的type(范例)名称是不能重复的,它的观点有点类似于数据表中的主键属性。

那末Action Creator(行动生成器)又是什么?

在程序语言的函数库中,假如是个英文的名词,一般都是代表某种对象或数据花样,比方Action(行动)就是个纯真的对象。假如叫什么xxxxter或xxxxtor的,中文翻译是”器”、”者”,一般就是个函数或要领,像上面的reducer和这里的Action Creator,都是一种函数。

Action creator的设想也是由Flux架构来的产品,它是一种辅佐用的函数,用来建立Action的。但由于设想的差别,在Redux中的Action creator比在Flux更简朴,它一般只用来返回Action对象罢了,固然它本身是个函数,在返回前是能够再针对返回的行动数据先进行运算或整顿的,比方像下面如许的函数:

export function addTodo(text) {
return { type: ADD_TODO, text }
}

这个addTodo函数,有一个传参,这个传参就会用于构成Action对象中的payload(有用数据)。

假如一个Action对象简朴到连payload(有用数据)都没有,一般会是个牢固payload(有用数据)的行动,比方每行动一次+1或-1,或是每行动一次在true或false值切换,那末在Redux中许可连Action或Action Creator都能够不必写了。然则这类状况也许只要在很小的运用,或是进修阶段的例子才会如许,假如运用照样有肯定水平的复杂度,肯定都是要写出来的。

固然,Action Creator天然有它很主要的作用,其中之一就是处置惩罚有副作用的运转,比方计时器、Fetch/Ajax等等,由于reducer是一个强迫没法有副作用的纯函数,所以Redux中的副作用会写在在Action Creator里,不过这须要再合营中介软件(middleware)来运转,以后的章节会再申明。

注: Action Creator在Redux中并没有肯定如果个纯函数,只是不发起在里面直接运转有副作用的函数。请参考这篇在stackoverflow的Reduce作者的回复。


推荐阅读
  • 这两天做了一个小项目,里面有个下载进度的进度条需要制作。先看呈现的效果:点击进度,然后依次递增,直到递增到百分之百。现在把这部分代码分享下来。<!DOCTYPEhtml><html ... [详细]
  • 十一、构建我们自己的包在本章中,我们将学习如何构建自己的包。编写包可以让我们创建可以在许多应用 ... [详细]
  • React项目中运用React技巧解决实际问题的总结
    本文总结了在React项目中如何运用React技巧解决一些实际问题,包括取消请求和页面卸载的关联,利用useEffect和AbortController等技术实现请求的取消。文章中的代码是简化后的例子,但思想是相通的。 ... [详细]
  • 上次我们总结了React代码构建后的webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且写一个简单的解析器,模拟整个生成的过程。我们还是拿最简 ... [详细]
  • domain.js代码如下 ... [详细]
  • 一、vue介绍Vue.js是一套构建用户界面(UI)的渐进式JavaScript框架,是一个轻量级MVVM(model-view-viewModel&# ... [详细]
  • 根据时间更改网站背景的脚本。热!
    我在网上找到了它,并以自己的方式对其进行了自定义;作者的功劳就在那里。实际上,这是一个用于更改背景颜色的脚本,并且在我看来& ... [详细]
  • react里可以但是vue我不熟悉,没找到App.vue是父`这里我想加载导航这是路由 ... [详细]
  • 媒介本日再看React纯函数的时刻,看到纯函数历程没有副作用,就是说在纯函数中我们不能转变外部状况.想到了之前看过的函数中传参的观点.数据范例在js中,数据范例分为两类:基础范例值 ... [详细]
  • easyuilayout实战
    第一步: ... [详细]
  • 【从零到壹】Koa 从理解到实现
    【从零到壹】Koa从理解到实现-【点击查看文中的相关源码】根据官网的介绍,Koa是一个新的Web框架,致力于成为Web应用和API开发领域中的一个更小、更富有表现力和更健壮的基石。 ... [详细]
  • 关于linux下,ls vi等命令失效的解决方法(配置下环境变量出现问题)
    配置完环境变量source之后,linux的lsvi命令均失效,报错如下:解决方法1.输入 exportPATHusrbin:usrsbin:bin:sbin:usrX11R6bi ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • 本文讨论了在ASP中创建RazorFunctions.cshtml文件时出现的问题,即ASP.global_asax不存在于命名空间ASP中。文章提供了解决该问题的代码示例,并详细解释了代码中涉及的关键概念,如HttpContext、Request和RouteData等。通过阅读本文,读者可以了解如何解决该问题并理解相关的ASP概念。 ... [详细]
  • 本文是一篇翻译文章,介绍了async/await的用法和特点。async关键字被放置在函数前面,意味着该函数总是返回一个promise。文章还提到了可以显式返回一个promise的方法。该特性使得async/await更易于理解和使用。本文还提到了一些可能的错误,并希望读者能够指正。 ... [详细]
author-avatar
Cornell和Janey的BabyPeter_580
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有