标准Flux Action

最新推荐文章于 2019-05-26 23:29:28 发布
最新推荐文章于 2019-05-26 23:29:28 发布
阅读量393 收藏
点赞数 1
文章标签： json 数据结构与算法 javascript ViewUI
原文链接：https://my.oschina.net/u/3582233/blog/1924347
版权

相关文档
目的
Actions结构约定
示例
工具库
flux-standard-action
isFSA(action)
isError(action)
redux-actions
createAction
createActions
handleAction
handleActions
combineActions

相关文档

  1. Flux Standard Action
  2. Redux Actions

目的

约定Flux action的数据结构有助于前端模块化的处理^[1]^。

注1：
对于Flux，以及Redux而言，其最初的设计动机都是为控制数据的修改操作范围(React组件中的state)，为达到这个目的，Flux抽象出Action的概念，将View和Store彻底解耦，所有对状态数据的修改，均只能通过Action进行。在Flux的设计(以及集成其设计并加以改进的Redux)中，Action即为一个普通的Json对象，其属性字段可任意定制(Action的属性在Reducer中引用，也就是说，在不考虑Reducer代码的可读/维护性情况下，每个Action可以完全不同)。Flux及Redux并无特定要求，但从代码的可读性以及可维护性考虑，Action对象的定义仍应遵循一定规则。

Actions结构约定

一个Flux标准Action应满足以下标准：

  1. 必须为标准的Json对象。
  2. 必须包含type属性。
  3. 可以包含error、payload、meta属性，除这些属性外，不应再包含其他属性。
    各属性含义如下：
属性名属性含义
typetype属性为Action对象的标识，值应为string，对type值的判断应使用严格对等(===)。
error若Action运行时可能产生异常时，error属性应设置为true，此时payload属性值应为一个错误对象，当error属性值为true之外的任何值(包括undefined和null)时，payload应为错误对象外的其他值，且应确保Action运行不会出现异常。
payload当error为true时，payload应为错误对象，否则payload可以为错误对象之外的任意值，此时payload可用于描述Action除type、status之外的任意信息(如附加参数)。
meta可以为任意类型的值，可用于补充payload信息。

示例

标准Flux Action代码结构如下：

{
    type : "ADD_TODO",
    payload : {
        text : "Do something.",
        data : ["some value"]
    },
    meta : {
        text : "flux standard action"
    }
}

可能产生异常的标准Flux Action代码结构如下：

{
    type : "ADD_TODO",
    payload : new Error(),
    error : true
}

工具库

flux-standard-action

可用于判断Action是否符合Flux标准，提供以下API：

isFSA(action)

引入方式：

import {isFSA} from "flux-standard-action";

当action为符合Flux标准的Action时，返回true。

isError(action)

引入方式：

import {isError} from "flux-standard-action";

当action会产生异常时返回true。

redux-actions

文档地址：

  1. GitHub。
    示例代码：
import {createActions, handleActions, combineActions} from "redux-actions";

const defaultState = {
    counter : 10
};

const {increment, decrement} = createActions({
    INCREMENT : (amount = 1) => ({ amount }),
    DECREMENT : (amount = 1) => ({ amount : -amount })
});

const reducer = handleAction(
    {
        [combineActions(increment, decrement)] : (
            state, 
            { payload : {amount}}
        ) => {
            return { ...state, counter : state.counter + amount };
        }
    },
    defaultState
);

export default reducer;

createAction

方法声明：

createAction(
    type,
    payloadCreator = identity,
    ?metaCreator
)

其中：

  1. type为必须参数，即对应生成的Action中type属性。
  2. payloadCreator和metaCreator为可选参数，其中，若payloadCreator不指定，则使用默认的处理，即payload即为输入参数。
  3. 当调用Action，并将payload对应参数设置为Error对象时，redux-actions会自动将action.error设置为true，如以下的代码所示：
const noop = createAction("NOOP");

const error = new TypeError("not a number");
expect(noop(error)).to.deep.equal({
    type : "NOOP",
    payload : error,
    error : true
});

createActions

方法声明：

createActions(
    actionMap,
    ?...identityActions
)

其中：

  1. actionMap：递归结构的对象，每个属性key为action type，每个属性value仅可为以下几种类型的值：
  • function：定位为createAction方法中的payload creator。
  • array：必须依次包含payload creator、meta creator。
  • actionMap。
    当actionMap为递归结构(即包含多层)时，最终产生的Action对象type值为其在actionMap中对应的属性key值，加上其父节点的type值合并形成，每层节点的type值默认用"/"分割，如下：
const actionCreators = createActions({
    APP : {
        COUNTER : {
            INCREMENT : [
                amount => ({amount}),
                amount => ({
                    key : "value",
                    amount
                })
            ],
            DECREMENT : amount => ({ amount : -amount }),
            SET : undefined
        },
        NOTIFY : [
            (username, message) => (
                {
                    message : `${username} : ${message}`
                }
            ),
            (username, message) => (
                {
                    username : message
                }
            )
        ]
    }
});

expect(actionCreators.app.counter.increment(1)).to.deep.equal({
    type : "APP/COUNTER/INCREMENT",
    payload : { amount : 1 },
    meta : { key : "value", amount : 1}
});
expect(acountCreators.app.counter.decrement(1)).to.deep.equal({
    type : "APP/COUNTER/DECREMENT",
    payload : { amount : -1 }
});
expect(actionCreators.app.counter.set(100)).to.deep.equal({
    type : "APP/COUNTER/SET",
    payload : 100
});
expect(actionCreators.app.notify("someuser", "Hello World")).to.deep.equal({
    type : "APP/NOTIFY",
    payload : {
        message : "someuser : Hello World"
    },
    meta : {
        username : "someuser",
        message : "Hello World"
    }
});

在上述的示例中，有两点比较特殊：

  1. 对于每个Action type的生成，如最初所述，若调用调用createActions方法时，传入递归结构的参数，那么type值将会是从根节点开始，沿路径依次合并的值，每级之间以特定分隔符切分，默认分割符为"/"，此分隔符也可以在方法的最后一个参数处指定，对应参数名称为namespace，如下：
createActions({...}, "INCREMENT", { namespace : "--"}); //将type值的分隔符设置为--
  1. 在上述的示例代码中，"SET" Action未指定payload creator，此时将采用默认的处理，如以下源码所示：
//createAction.js

import invariant from 'invariant';
import isFunction from './utils/isFunction';
import identity from './utils/identity';
import isNull from './utils/isNull';

export default function createAction(
  type,
  payloadCreator = identity, //若不指定payloadCreator，则使用utils/identity中定义的默认处理方式，即value => value
  metaCreator
) {
  invariant(
    isFunction(payloadCreator) || isNull(payloadCreator),
    'Expected payloadCreator to be a function, undefined or null'
  );

  const finalPayloadCreator =
    isNull(payloadCreator) || payloadCreator === identity
      ? identity
      : (head, ...args) =>
          head instanceof Error ? head : payloadCreator(head, ...args);

  const hasMeta = isFunction(metaCreator);
  const typeString = type.toString();

  const actionCreator = (...args) => {
    const payload = finalPayloadCreator(...args);
    const action = { type };

    if (payload instanceof Error) {
      action.error = true;
    }

    if (payload !== undefined) {
      action.payload = payload;
    }

    if (hasMeta) {
      action.meta = metaCreator(...args);
    }

    return action;
  };

  actionCreator.toString = () => typeString;

  return actionCreator;
}

handleAction

方法声明：

handleAction(
    type,
    reducer | reducerMap = Identity,
    defaultState
)

其中：

  1. type即对应Action的type属性。
  2. reducer/reducerMap即为响应Action的处理方法。如不给定，则使用默认的处理方法(value => value)。
  3. defaultState对应调用reducer的state参数，其定义为state参数的默认值。
    此处需要注意的是，若第2个参数使用reducerMap的形式，则应手动指定next()、throw()方法，即handleAction方法中的reducerMap并不是任意格式的Json对象，此点和createActions中的actionMap参数有差别。
    使用reducerMap的示例代码如下：
handleAction(
    "FETCH_DATA", 
    {
        next(state, action) {....},
        throw(state, action){....}
    },
    defaultState
);
  • 当next()、throw()方法中任一项未定义时，均视为reducerMap未定义，并使用默认方式处理。
  • 当action.error为true时，调用throw()方法，否则调用next()方法。

handleActions

方法声明：

handleActions(reducerMap, defaultState)

类似createActions，此方法创建针对多个action的reducer。其中，reducerMap的参数类型可以为以下类型：

  1. Map：此时key为action.type，value为reducer。
  2. Json：此时属性名为action.type，value为reducer。此时参数允许为递归结构，action.type的值为从根到最终叶子节点的路径，每级以固定分隔符切分，默认分隔符为/。

combineActions

方法声明：

combineActions(...types)

此方法合并多个Action type或Action creator，type参数的取值可以为action type字符串，或者action creator。
示例代码：

const {increment, decrement} = createActions(
    {
        INCREMENT : amount => ({amount}),
        DECREMENT : amount => ({amount : -amount})
    }
);

const reducer = handleActions(
    {
        [combineActions(increment, decrement)] : (
            state,
            {
                payload : {amount}
            }
        ) => {
            return { ...state, counter : state.counter + amount };
        }
    },
    {
        counter : 10
    }
);

expect(reducer({counter : 5}, increment(5))).to.deep.equal({counter : 10});
expect(reducer({counter : 5}, decrement(5))).to.deep.equal({counter : 0});
expect(reducer({counter : 5}, {type : "NOT_TYPE", payload : 1000})).to.equal({
    counter : 5
});
expect(reducer(undefined, increment(5))).to.deep.equal({counter : 15});

转载于:https://my.oschina.net/u/3582233/blog/1924347

chongkaodang1676
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flux Architecture
06-21
Flux Architecture是很多JavaScript框架的基础，比如React和VUEjs
Redux 快速上手指南
热门推荐
xiangzhihong8的专栏
05-31 1万+
Redux简介 如果要用一句话来概括Redux，那么可以使用官网的这句话：Redux是针对JavaScript应用的可预测状态容器。此句话虽然简单，但包含了以下几个含义： 可预测性(predictable): 因为Redux用了reducer与纯函数(pure function)的概念，每个新的state都会由旧的state建来一个全新的state。因而所有的状态修改都是”可预测的”。 状态...
谈谈FLUX的使用
weixin_33850890的博客
02-12 190
提要：本文所展示示例代码，既非JQuery代码，也是不React代码，为介于两者间的，方便行文伪代码。代码意思通过上下文即可理解。 Facebook的Jing Chen同学在2014年的F8上演示了她的FLUX架构。 FLUX的工作流如下： 中央Dispatcher管理所有进来的ACTION。 可以注册任意多个Stor...
理解Flux架构
西涛offbye-移动全栈技术博客
10-11 1396
Flux是Facebook推出的一种组织web应用开发的架构思想，它的基本思想很简单：在你的应用中，数据应该是单向流动的。这种思想可以被称为”单向数据流”，你也可以把它想象成一条鲨鱼：因为鲨鱼永远只能向前游动。到目前为止，Facebook自己推出了Flux实践的例子，同时至少有6个JS库进行了Flux架构的实现。在本文中，我们谈到的Flux，特指Facebook实现的Flux。一个Flux的例子为
flux standard action
luqingxuan
11-24 104
action = {type, payload, meta, error}   https://github.com/acdlite/flux-standard-action
Redux 核心概念
weixin_34112030的博客
08-25 122
http://gaearon.github.io/redux/index.html ，文档在 http://rackt.github.io/redux/index.html 。本文不是官方文档的翻译。你可以在阅读官方文档之前和之后阅读本文，以加深其中的重点概念。 根据该项目源码的习惯，示例都是基于 ES2015 的语法来写的。 Redux 是应用状态管理服务。虽然本身受到了 Flux 很深的影...
Flux Architecture.pdf
06-07
最后，我们展望了Flux的前景，并探索了Alt和Redux库，这些库可以使Reaction和Flux的开发更加容易。充满充分工作的例子和代码的第一解释，在书的结尾，你将不仅有一个坚实的理解体系结构，而且将准备好在愤怒中实现...
flux eidtor.rar
11-06
unity Flux编辑器,可以用来制作过场动画,也适用于修改后作为技能编辑器使用
flux屏幕色温调整
01-21
flux屏幕色温调整
flux护眼必备
12-04
他能随着一天的时间变化自动调整你电脑显示器屏幕的色温，过滤对人眼伤害最大的蓝光，从而尽可能减少屏幕对眼睛所带来的疲劳感并帮助提高夜猫子们的睡眠质量。“虾米！这货有这么神奇？”众人惊叹道。...
redux-actions：用于Redux的Flux Standard Action实用程序
02-17
寻找维护者 不幸的是，我（ ）没有足够的时间来维护这个库并给予必要的关注。 因此，我正在寻找愿意长期维护该库的维护人员。 要求： 总体上了解此库和开源。 保持这个图书馆的理念和目标。 照顾问题并提出要求。 如果需要并且是合理的，请制定此库的下一个版本，目的是在考虑社区的前提下进行改进，而不是出于唯一目的。 了解什么对图书馆有好处，什么不对（例如，不接受所有建议）以维护图书馆范围。 具备有关工具（CI，构建系统等）和文档的知识并进行维护。 也可以加入 ，这是一个补充redux实用程序库的伞形组织，可以处理很少或所有的库。 如果您对此感兴趣，请告诉我。 如果您想成为维护者，请给我发送电子邮件（地址为我的个人资料），主题为“ redux-actions”，并提供一些有关您的信息。 还原动作 用于Redux的实用程序 目录 入门 安装 $ npm install --save
Redux中的actions
一路斜阳的专栏
02-23 2741
介绍redux中的actions。
redux-action之createAction.js源码解读（自我理解）
en__ne的博客
12-28 933
createAction 先了解一下这个文件是做什么的？ 从单词字面意思能看出是创建一个action的，接下来我们看一下源码中主要做了写什么操作： //使用invariant()方法来断言程序假定为true的状态，提供有关内容和预期内容的信息， //将错误信息以throw的形式抛出 import invariant from 'invariant'; //判断某个参数typeof 是否为fun...
Flux 架构入门教程--新手必备，过程详解
似码非码的博客
09-04 1883
一、什么是Flux？ Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰 二、基本概念 Flux将一个应用分为四个部分 View： 视图层 Action（动作）：视图层发出的消息（比如mouseClick） Dispatcher（派发器）：用来接收Actions、执行回调函数 Store（数据层）：用来存放应用的状态
Struts2中Action的属性接收参数
茕夜
03-23 4975
Struts2中Action的属性接收参数，有三种传递并接收参数的方式，第一种是在Action添加成员属性接收参数，第二种是域模型，就是利用对象域来进行传递和接收参数，第三种是ModelDriven接收参数。接下来分别对这三种方式进行介绍。 1.在Action添加成员属性接收参数：即在自定义的Action中设置属性，以及相应的Setters和Getters方法，封装属性。 首先新建一个
关于Redux的一些总结(一)：Action & 中间件 & 异步
weixin_34032792的博客
08-26 273
在浅说Flux开发中，简单介绍了Flux及其开发方式。Flux可以说是一个框架，其有本身的 Dispatcher 接口供开发者；也可以说是一种数据流单向控制的架构设计，围绕单向数据流的核心，其定义了一套行为规范，如下图： Redux的设计就继承了Flux的架构，并将其完善，提供了多个API供开发者调用。借着react-redux，可以很...
Redux-状态管理器
weixin_33802505的博客
05-26 522
简介 Redux是JS的状态管理器，便于我们更加清晰管理追踪应用程序中变化莫测的状态变更。Redux采用 单一数据流 的方式对数据进行管理，这种方式的好处在于只能从单一的方向进行数据变更，剔除了数据能五花八门改变的方式，有利于我们对数据的变化的追踪，同时降低项目后期的维护成本。 Redux状态管理器的核心思想: store状态树 action行为状态对象 reducer行为状态的处理 简单的说...
Flux
最新发布
05-30
在Reactor库中，`Flux`是一种异步执行的多个结果的数据流，它类似于Java中的`Stream`。`Flux`可以让您更轻松地处理和转换数据流，以及处理来自外部数据源的事件。 `Flux`可以使用多个方式创建，例如使用静态方法、使用`Iterable`或`Stream`、从`Mono`转换等。以下是一个使用静态方法创建`Flux`的示例： ```java import reactor.core.publisher.Flux; public class FluxExample { public static void main(String[] args) { Flux.just("Hello", "World") // 创建一个包含两个字符串的Flux .subscribe(System.out::println); // 订阅Flux并在元素可用时打印它们 } } ``` 在上面的代码中，我们使用`Flux.just`方法创建了一个包含两个字符串的`Flux`，然后使用`subscribe`方法来订阅它并在元素可用时打印它们。 `Flux`还提供了许多其他方法，可以用于创建、转换和组合`Flux`。例如，您可以使用`map`方法将`Flux`中的元素转换为另一种类型，或使用`merge`方法将多个`Flux`合并为一个。以下是一个使用`map`和`merge`的示例： ```java Flux<String> flux1 = Flux.just("Hello", "World"); Flux<String> flux2 = Flux.just("Reactor", "Flux"); Flux<String> result = Flux.merge(flux1.map(String::toUpperCase), flux2.map(String::toLowerCase)); result.subscribe(System.out::println); // 输出 "HELLO", "WORLD", "reactor", "flux" ``` 在上面的代码中，我们首先使用`map`方法将`flux1`和`flux2`中的字符串转换为大写和小写，然后使用`merge`方法将它们合并为一个`Flux`。最后，我们订阅了`result`并打印了它。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值