React技术栈之FSA知识
Flux Standard Actionaction在Flux架构中是及其重要的概念,它是应用状态变化的必要条件,所有的状态都必须通过action触发。action的角色是状态变更信息的载体,是一个object,包含一个表示action type的字段,这事Flux对action的全部要求。不同于Flux作为架构思想的宽泛要求,在实际的开发中,我们往往希望打交道的同类实物有着类似的接口/结构。 Flux Standard Action的定位是“一个用户友好的Flux action对象标准”,它希望通过规范action的格式,为通用的action工具或抽象的实现奠定基础。换句话说,如果所有的action都有着类似的结构,那么通过统一的方法创建或修改action,或者通过统一的逻辑对action进行分析与相应等,便有了存在的可能性。 FSA结构典型的Flux Standard Action结构如下: { type: 'ADD_TODO',payload: { text: 'Do something.' } } 不难发现,FSA首先是一个普通的action,鼓励我们将负载信息放到payload字段中。基于这样的初步认识,了解一下它的规范。
type payload error meta 正如前面提到的,基于相同的action结构,提取action操作的公共逻辑会更加方便,redux-actions、redux-promise等都是在FSA基础上衍生出来的action处理工具。 redux-actions在 redux 全家桶中,可以利用 redux-actions 来创建符合 FSA 规范的Action。我们从普通的action对象讲起。 以添加一个todo的Action为例: { type:'add_todo',data:'我要去跑步' } 这样就定义了一个添加一条todo的Action,然后就能通过某个行为去触发这个Action,由这个Action携带的数据(data)去更新store(state/reducer): store.dispatch({ type:'add_todo',data:'your data' }) type 是一个常量,Action的必备字段,用于标识该Action的类型。在项目初期,这样定义Action也能愉快的撸码,但是随着项目的复杂度增加,这种方式会让代码显得冗余,因为如果有多个行为触发同一个Action,则这个Action要写多次;同时,也会造成代码结构不清晰。因而,得更改创建Action的方式: const ADD_TODO = 'add_todo'; let addTodo = (data='default data') => { return { type: ADD_TODO,data: data } } //触发action store.dispatch(addTodo()); 更改之后,代码清晰多了,如果有多个行为触发同一个Action,只要调用一下函数 addTodo 就行,并将Action要携带的数据传递给该函数。类似 addTodo 这样的函数,称之为 Action Creator。Action Creator 的唯一功能就是返回一个Action供 dispatch 进行调用。 但是,这样的Action Creator 返回的Action 并不是一个标准的Action。在Flux的架构中,一个Action要符合 FSA(Flux Standard Action) 规范,需要满足如下条件:
payload 是一个对象,用作Action携带数据的载体。所以,上述的写法可以更改为: let addTodo = (data='default data') => { return { type: ADD_TODO,payload: { data } } } 在 redux 全家桶中,可以利用 redux-actions 来创建符合 FSA 规范的Action: import {creatAction} from 'redux-actions'; let addTodo = creatAction(ADD_TODO) //same as let addTodo = creatAction(ADD_TODO,data=>data) 可以采用如下一个简单的方式检验一个Action是否符合FSA标准: let isFSA = Object.keys(action).every((item)=>{ return ['payload','type','error','meta'].indexOf(item) > -1 }) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |