redux样板代码简化写法
直接使用redux,要写很多样板代码,大量的actiontype,actionCreator。
一个异步的方法要写三个actiontype,三个actionCreator,十分繁琐。
下面是本人使用的一种简化写法,使用数组动态生成一些action和actionCreator,具有参考价值。
action-type.js
export const asynctypes = [
'getCateList',
'getArticleList',
'searchArticles',
'getArticleDetail',
] export const synctypes = [
'@@router/LOCATION_CHANGE'
] export const types = {}; asynctypes.forEach(item => {
types[item + '.start'] = item + '.start';
types[item + '.ok'] = item + '.ok';
types[item + '.error'] = item + '.error';
}); synctypes.forEach(item => {
types[item] = item;
});
synctypes生成同步的actiontype,asynctypes生成异步的actiontype,字符串只在数组中声明一次,减少书写量
action.js
import {asynctypes} from './action-type';
import {createAction} from 'redux-actions'; function fCreateActionsAsync(aType,fCreateAction){
const oResult = {};
aType.forEach(item => {
oResult[item + 'Start'] = fCreateAction(item + '.start');
oResult[item + 'Ok'] = fCreateAction(item + '.ok');
oResult[item + 'Error'] = fCreateAction(item + '.error');
});
return oResult;
} export default fCreateActionsAsync(asynctypes,createAction);
导出的是通过asynctypes生成的三个actionCreator的集合,此集合可以直接在bindActionCreators函数中直接使用,
在组件中可以直接调用生成的action方法:
组件article.jsx
import acts from 'index/redux/actions'; export default connect(
(state,props) => { return {data: state.article.data,currentCate:fCurrentCate(state,props)} },
dispatch => { return {actions: bindActionCreators(acts,dispatch)} }
)(Article);
在组件中使用actions.getCateListStart就可以开始一个异步调用了。
start是个开始,项目中使用了redux-saga来自动唤起下面的异步调用,异步完成后自动调用ok或error的action。
//根saga中监控所有的异步调用
export default function* rootSaga(){
yield [
fork(wacthArticleDetail),
fork(watchCateList),
fork(watchActicleList),
fork(watchSearchAtricles)
]
}
//监控到异步start调用,自动唤起异步调用
function* wacthArticleDetail(){
yield takeEvery(actions.getArticleDetailStart,fGetArticleDetailAsync);
} //异步调用结束自动唤起Ok或者error的action
function* fGetArticleDetailAsync(action) {
try{
const articleId = action.payload.articleId;
const article = yield call(getArticleDetail,articleId);
yield put(actions.getArticleDetailOk(article));
}
catch(err){
yield put(actions.getArticleDetailError(err))
}
}
redux样板代码简化写法的更多相关文章
- react第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构)
第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构) #课程目标 中间件:中间件增强redux的可扩展性,实现功能复用的目的. redux-thunk异步逻 ...
- 学习Redux之分析Redux核心代码分析
1. React,Flux简单介绍 学习React我们知道,React自带View和Controller库,因此,实现过程中不需要其他任何库,也可以独立开发应用.但是,随着应用程序规模的增大,其需要控 ...
- python多行代码简化
python中,可以把多行代码简化为一行,把for循环和if条件判断都集中到一行里来写,示例如下: >>> from nltk.corpus import stopwords > ...
- HTML代码简写法:Emmet和Haml
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854 HTML代码简写法:Emmet和Haml ...
- Hibernate事务代码规范写法
----------------siwuxie095 事务相关概念 1.什么是事务 逻辑上的一组操作,构成这组操作的各个单元,要么一起成功, 要么一起失败 2.事务的四个特性 1)原子性 2)一致性 ...
- 列表查询组件代码, 简化拼接条件SQL语句的麻烦
列表查询组件代码, 简化拼接条件SQL语句的麻烦 多条件查询
- Py基础—变量名,条件循环,空执行,编码,运算符,字符比较,简化写法
变量名 只能是字母,数字,下划线.数字不能开头,不要和python内置的东西重复.赋予变量名内容:name1 = "shit" 输出变量名内容 print(name1) 条件语句 ...
- mybatis 04: mybatis对象分析 + 测试代码简化 + 配置优化
MyBatis对象分析 测试代码示例 package com.example.test; import com.example.pojo.Student; import org.apache.ibat ...
- 提高Objective-C代码质量心机一:简化写法
提高OC代码质量的小心机 一.OC特性 OC 为 C 语言添加了面向对象特性,是其超集; OC 使用动态绑定的消息结构,也就是,在运行时才会检查对象类型; 接收一条消息后,究竟应执行何种代码,由运行期 ...
随机推荐
- Objective-C 内存管理和ARC
内存管理 范围: 任何继承了NSObject的对象 对基本数据类型无效 原理: 每个对象内部都保存了一个与之相关联的整数 称为引用计数器 1.计数器的基本操作 当使用alloc new或者copy创建 ...
- 【WXS全局对象】Global
Global对象的方法调用时,无需使用 Global.parseInt(...),而是直接使用 parseInt(...) 方法: 名称 说明 parseInt(string, radix) 解析一个 ...
- 【springmvc+mybatis项目实战】杰信商贸-3.需求分析与数据库建模
开发步骤需求:生产厂家信息维护基础表FACTORY_C 1.业务需求:a)<需求说明书> 1)描述业务功能 生产厂家模块 功能:为在购销合同模块中的货物信息和附件信 ...
- python常用函数—enumerate()
enumerate() 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enumerate将其组成一个索引序列,利用它可以同时获得索引和值的元组. 使用拆包,可以单独获得索引和值 ...
- 机器学习-聚类Clustering
简介 前面介绍的线性回归,SVM等模型都是基于数据有标签的监督学习方法,本文介绍的聚类方法是属于无标签的无监督学习方法.其他常见的无监督学习还有密度估计,异常检测等. 聚类就是对大量未知标注的数据集, ...
- ElasticSearch 论坛搜索查询语句
概述 研究论坛搜索如何综合时间和TF/IDF权重. 自定义权重计算的效率问题 数据结构 假设有一个论坛的搜索 字段包括: subject:标题 message:内容 dateline:发布时间 tag ...
- ServiceStack.Ormlit 使用Insert的时候自增列不会被赋值
Insert签名是这样的,将第2个参数设置为true就会返回刚插入的自增列ID了,然后可以手工赋值到对象上面去 public static long Insert<T>(this IDbC ...
- 官方文档 恢复备份指南一 Introduction to Backup and Recovery
1.备份分为:物理备份和逻辑备份 物理备份:备份数据文件 控制文件 归档日志文件 逻辑备份:EXP EXPDP备份等 物理备份为主,逻辑做补充 2.错误的类型 ...
- 头文件#ifndef #define #endif使用
想必很多人都看过“头文件中的 #ifndef #define #endif 防止该头文件被重复引用”.但是是否能理解“被重复引用”是什么意思?是不能在不同的两个文件中使用include来包含这个头文件 ...
- Linux 应用笔记
Linux 应用笔记 Linux 应用笔记 小书匠 Raspberry Pi 常用命令 CentOs Raspberry Ubuntu python 实用教程 Vim 权限问题 内存分配 shell ...