redux-amrc:用更少的代码发起异步 action
很多人说 Redux 代码多,开发效率低。其实 Redux 是可以灵活使用以及拓展的,经过充分定制的 Redux 其实写不了几行代码。今天先介绍一个很好用的 Redux 拓展—— redux-amrc。它可以帮助我们使用更少的样板代码发起异步 action。
低效的过去
一般情况下,为了清楚地记录异步的过程,我们需要使用 三个 action 来记录状态变化。通常,我们的代码会是这样:
const LOAD = 'redux-example/auth/LOAD';
const LOAD_SUCCESS = 'redux-example/auth/LOAD_SUCCESS';
const LOAD_FAIL = 'redux-example/auth/LOAD_FAIL';
写完这么多 action,还要在异步的前后发起它们,当然这时你可能会用中间件,所以你的代码最少也会是这样:
export function load() {
return {
types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
promise: (client) => client.get('/loadAuth')
};
}
发起 action 后,还要编写 reducer 来处理这些 action,以改变状态:
export default function reducer(state = initialState, action = {}) {
switch (action.type) {
case LOAD:
return {
...state,
loading: true
};
case LOAD_SUCCESS:
return {
...state,
loading: false,
loaded: true,
user: action.result
};
case LOAD_FAIL:
return {
...state,
loading: false,
loaded: false,
error: action.error
default:
return state;
}
}
这太痛苦了,不就是发起一个异步吗?非要让我写这么多代码?
其实,上述过程是可以简化的。记得有篇文章叫《超过90秒的任务不自动化,你好意思说自己是黑客?》,前端工程师也应该具有黑客精神,接下来就让我们使用 redux-amrc 将上述过程简化。
轻松的现在
使用了 redux-amrc 后,再也不用写这么多action了,甚至连处理这些action的reducer 都不用写,你只需要把异步以 Promise 的形式传给 redux-amrc 就行了:
import { ASYNC } from 'redux-amrc';
/**
* 这个action创建函数可以帮你自动发起 LOAD 和 LOAD_SUCCESS,
* state.async.[key] 将会变为 'success'
*/
function success() {
return {
[ASYNC]: {
key: 'key',
promise: () => Promise.resolve('success')
}
}
}
/**
* 这个action创建函数可以帮你自动发起 LOAD 和 LOAD_FAIL,
* state.async.loadState.[key].error 将会变为 'fail'
*/
function fail() {
return {
[ASYNC]: {
key: 'key',
promise: () => Promise.reject('fail')
}
}
}
没有 action,没有 reducer,就是这么清爽!当然,在享受这一切之前,你需要进行简单的配置。更详细的用法,请参考 redux-amrc 的官网文档。
另外,附一张使用 redux-amrc 的程序截图,那些 LOAD、LOAD_SUCCESS、LOAD_FAIL 就是 redux-amrc 帮你自动生成的!
redux-amrc:用更少的代码发起异步 action的更多相关文章
- 编写更少量的代码:使用apache commons工具类库
Commons-configuration Commons-FileUpload Commons DbUtils Commons BeanUtils Commons CLI Commo ...
- 编写更少bug的程序的六条准则
如何编写更少bug的程序? 尽可能避免常见的程序错误. 沟通设计先行 + 编写可复用代码 + 做得更多 + 做的更少 + 创造“编程心流”+ 严格的程序测试 ...
- 【React全家桶入门之十三】Redux中间件与异步action
在上一篇中我们了解到,更新Redux中状态的流程是这种:action -> reducer -> new state. 文中也讲到.action是一个普通的javascript对象.red ...
- Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案
近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...
- .NET 事件总线,简化项目、类库、线程、服务等之间的通信,代码更少,质量更好。
Jaina .NET 事件总线,简化项目.类库.线程.服务等之间的通信,代码更少,质量更好. 安装 Package Manager Install-Package Jaina .NET CLI do ...
- Powerful Sleep(神奇的睡眠-睡眠生物钟的秘密:如何睡得更少却睡得更好)阅读笔记
睡眠机制 我们活着的时候,大脑会产生脑电波.脑电图仪器通过贴在人头上的一些电极读出脑电波的活动,然后把活动用图表显示出来. 睡眠过程可以分为5个过程,划分依据与大脑发出的脑电波类型. 当人清醒时,大脑 ...
- Quality Over Quantity: 更少一些,更好一些_第1页_福布斯中文网
Quality Over Quantity: 更少一些,更好一些_第1页_福布斯中文网 Quality Over Quantity: 更少一些,更好一些 2013年04月09日 ...
- git 常用命令,上传,下载,更新线上代码
git 常用命令以及推荐git新建上传个人博客 $ git clone //本地如果无远程代码,先做这步,不然就忽略 $ git status //查看本地自己修改了多少文件 $ git add . ...
- 面试 6:拓展性更好的代码,更容易拿到 Offer
今天给大家带来的是 <剑指 Offer>习题:调整数组顺序使奇数位于偶数前面,纯 Java 实现希望大家多加思考. 面试题:输入一个整型数组,实现一个函数来调整该数组中的数字的顺序,使 ...
随机推荐
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Cmder--Windows下命令行利器
cmder cmder是一个增强型命令行工具,不仅可以使用windows下的所有命令,更爽的是可以使用linux的命令,shell命令. 安装包 安装包链接 下载后,直接解压即用. 修改命令提示符λ为 ...
- Travis CI用来持续集成你的项目
这里持续集成基于GitHub搭建的博客为项目 工具: zqz@ubuntu:~$ node --version v4.2.6 zqz@ubuntu:~$ git --version git versi ...
- 《Django By Example》第五章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag注:大家好,我是新来的翻译, ...
- 在 ML2 中配置 OVS flat network - 每天5分钟玩转 OpenStack(133)
前面讨论了 OVS local network,今天开始学习 flat network. flat network 是不带 tag 的网络,宿主机的物理网卡通过网桥与 flat network 连接, ...
- .NET Core 首例 Office 开源跨平台组件(NPOI Core)
前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...
- HashSet HashTable 与 TreeSet
HashSet<T>类 HashSet<T>类主要是设计用来做高性能集运算的,例如对两个集合求交集.并集.差集等.集合中包含一组不重复出现且无特性顺序的元素. HashSet& ...
- SuperMap iClient for JavaScript 新手入门
地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...
- jquery屏幕滚动计算事件总结
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度: $(docume ...
- Linux之搭建自己的根文件系统
Hi!大家好,我是CrazyCatJack.又和大家见面了.今天给大家带来的是构建Linux下的根文件系统.希望大家看过之后都能构建出符合自己需求的根文件系统^_^ 1.内容概述 1.构造过程 今天给 ...