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)的更多相关文章

  1. 使用Redux DevTools浏览器插件调试redux

    与redux的Devtools模块不同,该工具主要依赖浏览器插件完成.模式也比Devtools简单点. step1 下载插件 Chrome地址(360极速模式也可以用): https://chrome ...

  2. Redux DevTools浏览器插件调试redux

    与redux的Devtools模块不同,该工具主要依赖浏览器插件完成.模式也比Devtools简单点. redux-devtools 是一个非常棒的工具,它可以让你实时的监控Redux的状态树的Sto ...

  3. 【redux】详解react/redux的服务端渲染:页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

  4. 动手实现 Redux(六):Redux 总结

    不知不觉地,到这里大家不仅仅已经掌握了 Redux,而且还自己动手写了一个 Redux.我们从一个非常原始的代码开始,不停地在发现问题.解决问题.优化代码的过程中进行推演,最后把 Redux 模式自己 ...

  5. redux 及 相关插件 项目实战

    目录结构 +-- app | +-- actions | +-- index.js | +-- components | +-- content.js | +-- footer.js | +-- se ...

  6. 使用 redux 监听插件的使用

    首先需要在chrome浏览器当中下载redux插件 接着在你的项目当中加上**window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX ...

  7. react+redux开发谷歌插件

    React Developer Tools Redux Dev Tools

  8. 在Redux中使用插件createAction之后

    我们知道在React的Redux的中的action在项目开发过程中,一般时使用createAction来生成 举个栗子,小李子: const createTodo=createACtion('CREA ...

  9. react+redux教程(二)redux的单一状态树完全替代了react的状态机?

    上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...

随机推荐

  1. sql注入记录------类型转换错误---convert()函数,一句话图片马制作

    sql注入在联合查询是出现一下错误查不到数据 Illegal mix of collations for operation 'UNION' 用convert() 转换编码为utf8 或者big5 就 ...

  2. .net web api应用遇到的一些问题

    1.调用webapi接口时,碰到一种情况: 通过webapi调用接口时,返回的json数据,死活转换不成对象,转换的对象一直为null: webapi端代码: [HttpGet] public str ...

  3. Java开发工程师(Web方向) - 03.数据库开发 - 第2章.数据库连接池

    第2章--数据库连接池 数据库连接池 一般而言,在实际开发中,往往不是直接使用JDBC访问后端数据库,而是使用数据库连接池的机制去管理数据库连接,来实现对后端数据库的访问. 建立Java应用程序到后端 ...

  4. 利用爬虫、SMTP和树莓派3B发送邮件(爬取墨迹天气预报信息)

    -----------------------------------------学无止境----------------------------------------- 前言:大家好,欢迎来到誉雪 ...

  5. c字符指针与字符数组的区别

    1.定义 char *pchar;  //定义了指针,没赋值之前不能使用.如果:printf("*pchar:%c\n",*pchar); 出现段错误Segmentation fa ...

  6. linux服务器操作小技巧

    python程序后台一直运行,并将打印信息输出到文件中 nohup -u test.py > out.txt & -u 表示无缓冲,直接将打印信息输出带文件中 &表示程序后台运行

  7. solidity合约详解

    Solidity 是一个面向合约的高级语言,其语法类似于JavaScript .是运行在以太坊虚拟机中的代码.这里我们用的是remix编译环境.是一个在线的编译环境.地址为http://remix.e ...

  8. Python运行的方式

    Python的运行方式多种多样,下面列举几种: 交互式 在命令行中输入python,然后在>>>提示符后面输入Python语句,这里需要注意: 1 语句前面不能有空格,否则会报错 2 ...

  9. 4-1:实现tee命令

    #include <stdio.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h& ...

  10. POJ 1995 (快速幂)

    这道题普通做法会发生溢出且会超时,应当用快速幂来求解. 快速幂讲解 #include <cstdio> #include <cmath> using namespace std ...