Redux 的选择器库 Reselect

MIT
JavaScript TypeScript
跨平台
2018-06-22
王练
Reselect 正在参加 2019 年度最受欢迎开源中国软件评选,请投票支持!
Reselect 在 2019 年度最受欢迎开源中国软件评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票赢奖品
已投票

Reselect 是一个 Redux 的选择器库,灵感来源于 NuclearJS

  • Selector 可以计算衍生的数据,可以让 Redux 存储尽可能少的 state 。

  • 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 }
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

聊聊dubbo的Invoker select

序 本文主要研究一下dubbo的Invoker select InvokerInvocationHandler.invoke dubbo-2.7.1-sources.jar!/org/apache/dubbo/rpc/proxy/InvokerInvocationHandler.java public class InvokerIn...

06/16 21:50
25
0
Dbus项目前端React组件汇总

由于本次项目基于DBus https://github.com/BriData/DBus 项目为基础进行开发,该项目采用前后分离的方式,前端主要是基于React构建的项目,对于一个非专业前端来说 由于Dbus项目中并没有对前端这...

11/07 16:07
4
0
Web前端单元测试到底要怎么写?看这一篇就够了

随着 Web 应用的复杂程度越来越高,很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用,但在实际项目中单元测试要怎么下手...

2018/08/20 14:11
2
0
Dubbo服务调用——流程分析

我们根据官网的案例来分析Dubbo的调用过程是什么样的 1.首先粘贴下调用源头 public static void main(String[] args) throws Exception { ClassPathXmlApplicationContext context = new Cla...

2018/08/15 17:53
2.6K
2
React16+Redux 实战企业级大众点评WebApp

第1章 课程介绍 本章主要介绍课程大纲、课程目标,以及开发环境搭建和实战案例演示。 1-1 课程导学 试看 1-2 前置准备 第2章 React项目脚手架:create-react-app 本章介绍React生态中最流行的...

03/21 11:24
12
0
dubbo源码分析系列——dubbo-cluster模块源码分析

dubbo-cluster也是dubbo中最为重要的一个模块,该模块实现了多种集群容错特性(支持包括failover, failsafe, failback, froking, boradcast多种集群通错特性),还实现了目录服务,负载均衡...

2016/06/12 10:28
4.9K
3
vue2.5入门(推荐,差代码)

课程地址:https://www.imooc.com/learn/980 教程:https://cn.vuejs.org/v2/guide 放在头部,避免页面出现抖屏 挂载点 下面是原生 模板 <!DOCTYPE html> <html lang="en"> <head> <met...

2018/04/26 21:45
148
0
贴几个自己写的BigIP F5的iRule

#======================================# # 几个BigIP F5 iRule的习作 # # Author: BrokenStone # # mail: wdmsyf@yahoo.co # # 2006.11.30 # #======================================# ...

2016/05/03 13:31
63
1
dubbo源码分析-集群容错(一)

Dubbo 主要提供了这样几种容错方式: Failover Cluster - 失败自动切换 Failfast Cluster - 快速失败 Failsafe Cluster - 失败安全 Failback Cluster - 失败自动恢复 Forking Cluster - 并行...

03/07 17:42
10
0
redux学习记录

redux react 数据流

2016/07/07 16:13
34
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部