redux的一些插件总结(redux-actions,reselect)
redux本身还是过于简单,实际使用的时候需要配合许多插件。
下面是一些插件与vuex的功能对比
redux-actions <=> vuex的mutation的写法
reselect <=> vuex的getters
redux-react <=> vuex的mapState,mapActions,mapMutations
1.redux-actions
redux-actions是用来简化action和reducer的写法。
redux-actions的常用的API分别是createAction、createActions、handleAction、handleActions、combineActions
简化前后的对比如下:
1.创建Action
//简化前写法
const COUNTER_INCREMENT = 'COUNTER_INCREMENT';
const COUNTER_DECREMENT = 'COUNTER_DECREMENT'; export const incrementCounter = () => ({
type: COUNTER_INCREMENT,
});
export const decrementCounter = () => ({
type: COUNTER_DECREMENT,
}); //简化后写法
const COUNTER_INCREMENT = 'COUNTER_INCREMENT';
const COUNTER_DECREMENT = 'COUNTER_DECREMENT';
export const incrementCounter = createAction('COUNTER_INCREMENT');
export const decrementCounter = createAction('COUNTER_DECREMENT');
2.创建Reducer
//简化前写法
export default (state = 0, action) => {
switch (action.type) {
case COUNTER_INCREMENT:
return state + 1;
case COUNTER_DECREMENT:
return state - 1;
default:
return state;
}
} //简化后写法
export default handleActions({
[incrementCounter](state) {
return state + 1;
},
[decrementCounter](state) {
return state - 1;
},
}, 0)
2.reselect
reselect可以用来产生一些依赖变量,产生依赖变量的函数称为selector。
reselect不仅可以用于redux,其他有依赖属性的地方也可以使用。
Selector可以计算衍生的数据,可以让Redux做到存储尽可能少的state
Selector会缓存结果,只有在某个参数发生变化的时候才发生计算过程
Selector是可以组合的,他们可以作为输入,传递到其他的selector
例如:
import { createSelector } from 'reselect' const shopItemsSelector = state => state.shop.items
const taxPercentSelector = state => state.shop.taxPercent const subtotalSelector = createSelector(
shopItemsSelector,
items => items.reduce((acc, item) => acc + item.value, 0)
) const taxSelector = createSelector(
subtotalSelector,
taxPercentSelector,
(subtotal, taxPercent) => subtotal * (taxPercent / 100)
) export const totalSelector = createSelector(
subtotalSelector,
taxSelector,
(subtotal, tax) => ({ total: subtotal + tax })
) let exampleState = {
shop: {
taxPercent: 8,
items: [
{ name: 'apple', value: 1.20 },
{ name: 'orange', value: 0.95 },
]
}
} console.log(subtotalSelector(exampleState)) // 2.15
console.log(taxSelector(exampleState)) // 0.172
console.log(totalSelector(exampleState)) // { total: 2.322 }
reselect的详细用法,可以参考https://www.jianshu.com/p/6e38c66366cd
参考:https://majing.io/posts/10000006441202
redux的一些插件总结(redux-actions,reselect)的更多相关文章
- 使用Redux DevTools浏览器插件调试redux
与redux的Devtools模块不同,该工具主要依赖浏览器插件完成.模式也比Devtools简单点. step1 下载插件 Chrome地址(360极速模式也可以用): https://chrome ...
- Redux DevTools浏览器插件调试redux
与redux的Devtools模块不同,该工具主要依赖浏览器插件完成.模式也比Devtools简单点. redux-devtools 是一个非常棒的工具,它可以让你实时的监控Redux的状态树的Sto ...
- 【redux】详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- 动手实现 Redux(六):Redux 总结
不知不觉地,到这里大家不仅仅已经掌握了 Redux,而且还自己动手写了一个 Redux.我们从一个非常原始的代码开始,不停地在发现问题.解决问题.优化代码的过程中进行推演,最后把 Redux 模式自己 ...
- redux 及 相关插件 项目实战
目录结构 +-- app | +-- actions | +-- index.js | +-- components | +-- content.js | +-- footer.js | +-- se ...
- 使用 redux 监听插件的使用
首先需要在chrome浏览器当中下载redux插件 接着在你的项目当中加上**window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX ...
- react+redux开发谷歌插件
React Developer Tools Redux Dev Tools
- 在Redux中使用插件createAction之后
我们知道在React的Redux的中的action在项目开发过程中,一般时使用createAction来生成 举个栗子,小李子: const createTodo=createACtion('CREA ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
随机推荐
- Jmeter接口测试(二)工具介绍
一.Jmeter文件目录介绍 ◆ bin:可执行文件目录 Bin 目录文件 jmeter.bat:windows 的启动文件 jmeter.log:日志文件 jmeter.sh:linux 的启动文件 ...
- ADO.NET基础学习-----四种模型,防止SQL注入
1.ExcuteNonQuery 执行非查询语句,返回受影响的行数. // 1.ExcuteNonQuery string sqlconn = "Data Source=wss;Initia ...
- JVM--内存模型与线程
一.硬件与效率的一致性 计算机的存储设备与处理器的运算速度存在几个数量级的差距,现在计算机系统不得不在内存和处理器之间增加一层高速缓存(cache)来作为缓冲.将运算需要的数据复制到缓存中,让运算能够 ...
- JAVA基础学习之路(二)方法定义,重载,递归
一,方法的定义: package test; public class test1 { public static void main(String args[]) { int result = ad ...
- chrome编辑器与截图
在地址栏中输入 data:text/html,<html contenteditable>即可使用编辑功能,打开控制台,ctrl + shift + p 调用命令面板,输入 capture ...
- FPGA学习-VGA接口
一般FPGA开发板的VGA会向用户暴露两共五个种接口,第一种是时序信号,用于同步传输和显示:第二种是色彩信号,用于随着时序把色彩显示到显示器上 时序接口 行同步信号-用于指示一行内像素的显示 场同步信 ...
- 基础数据类型-dict
字典Dictinary是一种无序可变容器,字典中键与值之间用“:”分隔,而与另一个键值对之间用","分隔,整个字典包含在{}内: dict1 = {key1:value1, key ...
- java设计模式简介
设计模式简介: 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用.设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案.这些解决方案是众多 ...
- lintcode-30-插入区间
插入区间 给出一个 无重叠 的按照区间起始端点排序的区间列表. 在列表中插入一个新的区间,你要确保列表中的区间仍然有序且 不重叠 (如果有必要的话,可以合并区间). 样例 插入区间[2, 5] 到 [ ...
- iOS单利创建的方法
我们在使用单例的时候有两种方法@synchronized,GCD,往往人们使用@synchronized,但是推荐使用GCD: 第一种(@synchronized): + (id)sharedInst ...