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 ...
随机推荐
- tomcat部署项目,80端口被占,解决方案
第一个解决方案: 最大的可能:被System占了. 解决Windows Server 2008 System进程占用80端口 输入netstat -ano 可以看到80端口被PID4占用,于是打开任务 ...
- php导出excel表格的使用
网站后台有很多列表数据,常常都会有导出excel表格的需求,和大家分享一个实用的导出excel表格方法: 不多说,上代码: /** * @param array $data 要导出的数据 * @par ...
- hello word!------为什么开通博客以及自我介绍
来北京已经一年半的日子了,已经完全成功熟练的成为了另一个我,没有了半年前刚来时的那种焦虑.急躁和格格不入. 回想起来那段时间,大概是我人生中非常重要的时期了,去年那个夏天,只身一人背上行囊踏上了北上的 ...
- mpvue笔记
简介: mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,为小程序开发引入 Vue.js 开发体验 我觉得就像scss一样,写的时候方便,最后还是要转成css文件 搭建 ...
- JS原型链与继承别再被问倒了
原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...
- [SHELL]shell中变量的使用
1.输出变量 : #! /bin/bash my_var=BOB echo $my_var echo "hi,$my_var" echo "the price is \$ ...
- Executor Framework
Why? look at the following 2 pieces of code for implementing a simple web server based on socket, ca ...
- Centos配置深度学习开发环境
目录 1. 安装显卡驱动 2. 安装CUDA\CUDNN 3. 安装TensorFlow-gpu 测试 1. 安装显卡驱动 检测显卡驱动及型号 $ sudo rpm --import https:// ...
- C#程序 权限不够的解决方案
有时候需要操作硬件,或者启动windows服务程序时,系统会提示很多奇怪的问题,归根结底就是程序当前所拥有的权限不够,需要提升,以前我们时手写一个manifest,多不容易啊, 现在有正常的方法了 1 ...
- 应用Response.Write实现带有进度条的多文件上传
前几天,写过一篇随笔“使用RESPONSE.WRITE实现在页面的生命周期中前后台的交互”.说是交互,实际上也主要是在ASP.NET的页面周期中 从后台利用RESPONSE.WRITE向前台即时的推送 ...