使用redux-actions优化actions管理
redux-actions的api很少,有三个createAction(s) handleASction(s) combineActions
主要用到createAction去统一管理action,虽然会增加一些代码量,但可以统一管理action,对代码维护有很大方便。
项目是用的dva框架,这个跟框架无关,createAction完成的是执行了一个dispatch
使用之前:
dispatch({type:'products/asyncDecr',payload:})
payload可以传递参数
使用之后:
increment()
可以给方法increment({a:1,b:2})传入参数,参数会在加载到payload参数上,可以直接取出来使用。
具体用法:
安装:$ npm install redux-actions --save
使用:
新建action目录下index.js文件:
import { createAction } from 'redux-actions'; export const increment = createAction('products/increment');
export const decrement = createAction('products/decrement');
export const asyncDecr = createAction('products/asyncDecr');
UI component中使用:
首先引入组件:
import { increment, asyncDecr } from '../actions';
利用connect将actions连接到组件:
export default connect(mapStateToProps, { increment, asyncDecr })(ProductPage);
取出使用:
const { products, dispatch, increment, asyncDecr } = this.props;
<Button type="primary" onClick={()=>increment()}>increment</Button>
<Button type="primary" onClick={()=>asyncDecr()}>asyncDecr</Button>
使用redux-actions优化actions管理的更多相关文章
- [React Testing] The Redux Store - Multiple Actions
When using Redux, we can test that our application state changes are working by testing that dispatc ...
- SQL Server性能优化与管理的艺术 附件下载地址
首先感谢读者们对鄙人的支持,购买了<SQL Server性能优化与管理的艺术>,由于之前出版社的一些疏忽,附件没有上传成功,再次本人深表歉意. 请需要下载附件的读者从下面链接下载,谢谢: ...
- 为什么要用redux?component自身管理自己的state难道不更解耦吗?
这是前几天百度2面的时候,面试官问我的一个问题.说实话当时有点紧张,其实也没去细想,本身react我就学了2个多星期,虽然看过redux这些源码,不过这个问题好像我从来没想过. 那其实react官网本 ...
- 基于 Redux + Redux Persist 进行状态管理的 Flutter 应用示例
好久没在 SegmentFault 写东西,唉,也不知道 是忙还是懒,以后有时间 再慢慢写起来吧,最近开始学点新东西,有的写了,个人博客跟这里同步. 一直都在自己的 React Native 应用中使 ...
- Android性能优化系列---管理你的app内存
文章出处:http://developer.android.com/training/articles/memory.html#YourApp Random-access memory(RAM)在任 ...
- Linux高级调试与优化——内存管理
1.物理地址和虚拟地址 Linux采用页表机制管理内存,32位系统中页大小一般为4KB,物理内存被划分为连续的页,每一个页都有一个唯一的页号. 为了程序的的可移植性,进程往往需要运行在flat mem ...
- 深入探索Glide图片加载框架:做了哪些优化?如何管理生命周期?怎么做大图加载?
前言 Glide可以说是最常用的图片加载框架了,Glide链式调用使用方便,性能上也可以满足大多数场景的使用,Glide源码与原理也是面试中的常客. 但是Glide的源码内容比较多,想要学习它的源码往 ...
- Linux高级调试与优化——进程管理和调度
进程管理 进程和文件是Linux操作系统的两个最基本的抽象. 进程是处于执行期的程序,进程不仅仅局限于一段可执行程序代码,通常还包含其他资源,如打开的文件.挂起的信号.内核内部数据.处理器状态.进程地 ...
- 深入浅出MySQL 数据库开发、优化与管理维护(第2版) -- 读书笔记 -- 基础篇
1.切换数据库 use blog; 2.显示当前数据库 所有的表. show tables; +----------------+ | Tables_in_blog | +------------ ...
随机推荐
- 网易mumu模拟器配置文件和修改adb port位置
网易mumu模拟器配置文件在安装目录下 emulator\nemu\vms\myandrovm_vbox86下的myandrovm_vbox86.nemu文件中 修改port位置
- 为什么 window.location.search 为空?
1,什么是window.location?示例 URL:http://b.a.com:88/index.php?name=kang&when=2011#first 属性 含义 值 protoc ...
- layUI不同页面传参数
//页面一的方法 function modifyHotSearch(id){ layer.open({ type:2, title:"修改热门搜索", area: ['600px' ...
- Spring mvc实现ex导入导出
依赖架包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</arti ...
- PAT——1003. 我要通过!
“答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1 ...
- TextView selector 在LinearLayout中获取焦点问题
通常需要修改textview被选中时文字颜色,总是没效果,有以下几种方式可以实现: <?xml version="1.0" encoding="utf-8" ...
- Java使用正则解决问题
分析以下需求,并用代码实现 (根据描述写匹配手机号和邮箱的正则表达式) 1.根据描述写出正则表达式 (1)手机号正则: 第一位为1 第二位为3或4或5或7或8 第三~十一位为0~9的其中一个数字 (2 ...
- JS异步编程 (2) - Promise、Generator、async/await
JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...
- LeetCode 中级 - 组合总和(105)
给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...
- C++ ACM基础
一.C++结构体 #include <iostream> using namespace std; struct Point{ int x; int y; Point(int x=0,in ...