资讯专栏INFORMATION COLUMN

Redux概念之三: Action(动作)与Action Creator(动作创建器)

沈俭 / 3212人阅读

摘要:那么动作生成器又是什么在程序语言的函数库中,如果是个英文的名词,通常都是代表某种对象或数据格式,例如动作就是个单纯的对象。

这两个是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作者的回答。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81349.html

相关文章

  • 实例讲解Redux

    摘要:实例讲解示例代码地址在这里你可以通过命令到本地,也可以直接下载。之后便可以通过执行示例代码。下面结合实例中的内容理解上述概念。更改应用的状态通过方法将发送到函数中,进行状态的更新。分别用来处理页面和页面状态的更新。 实例讲解Redux 示例代码地址在这里 ,你可以通过git clone命令clone到本地,也可以直接下载。 然后通过执行npm install 安装所依赖的模块 。之后便...

    roland_reed 评论0 收藏0
  • Rematch: Redux 的重新设计

    摘要:沿着管道有两组侦听器中间件和订阅。中间件是可以侦听传入的动作的函数,支持诸如,或侦听器之类的工具。将视为一个带有更新前更新后钩子的全局对象,以及能够以简单的方式合成新状态。应将两者视为一体,并且不再需要文件导出类型的字符串。 难道现在状态管理不是一个可以解决的问题吗?直观地说,开发人员似乎知道一个隐藏的事实:状态管理的使用似乎比需要的更困难。在本文中,我们将探讨一些你可能一直在问自己的...

    Taste 评论0 收藏0
  • Redux概念之一: Redux简介

    摘要:应用这说明并不是单指设计给用的,它是独立的一个函数库,可通用于各种应用。在数据流的最后,要触发最上层组件的,然后进行整体的重新渲染工作。单纯在的对象上是没有办法使用,要靠额外的函数库才能这样作,这是一定要使用类似像这种函数库的主要原因。 Redux的官网中用一句话来说明Redux是什么: Redux是针对JavaScript应用的可预测状态容器 这句话虽然简短,其实是有几个涵义的: ...

    cjie 评论0 收藏0
  • Redux 莞式教程 之 简明篇

    摘要:只要一个有,那无论用什么设备访问,都会得到这个还原也是相当简单把数据库备份导入到另一台机器,部署同样的运行环境与代码。纯粹只是一个状态管理库,几乎可以搭配任何框架使用上述例子连都没用哦亲下一章进阶教程 Redux 简明教程 原文链接(保持更新):https://github.com/kenberkele... 写在前面 本教程深入浅出,配套 简明教程、进阶教程(源码精读)以及文档注释...

    notebin 评论0 收藏0
  • 理解 Redux

    摘要:我们知道状态机是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。对照上面我们自己写的状态机代码可以看出的作用告诉状态树发生什么变化,及所需要的数据是什么。 前言 我之前开发网站的时候一直用的是 Flux, 自从出了 Redux 之后由于种种原因没有跟进了解,最近手头上的事情基本忙的差不多了,抽空阅读了 Redux 的源码,并整理了这篇博文。 先说重点: Redux 与 R...

    leejan97 评论0 收藏0

发表评论

0条评论

沈俭

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<