Reselect 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Reselect 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ 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 }
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2018/08/24 14:56

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分...

0
0
发表了博客
2019/10/29 18:00

React全家桶+Material-ui构建的后台管理系统

一、简介 一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心。 二、 附录 + 1. [在线体验](https://simpleroom.github.io):账号:<code>admin</code>密码:<code>123456</code> + 2. [源码地址:https://github.com/SimpleRoom/walker-admin](https://githu...

0
0
发表于AI & 大数据专区
2019/06/16 21:50

聊聊dubbo的Invoker select

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

0
0
发表于大前端专区
2019/11/07 16:07

Dbus项目前端React组件汇总

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

0
0
发表了博客
2018/04/17 08:40

深入理解Redux

前面的话   Redux是Flux思想的另一种实现方式。Flux是和React同时面世的。React用来替代jQuery,Flux用来替换Backbone.js等MVC框架。在MVC的世界里,React相当于V(view)的部分,只涉及页面的渲染。一旦涉及应用的数据管理部分,还是交给Model和Controller。不过,Flux并不是一个MVC框架,它用一种新的思路来管理数据。...

0
0
发表了博客
2018/08/20 14:11

Web前端单元测试到底要怎么写?看这一篇就够了

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

0
0
发表了博客
09/21 07:33

Dubbo Cluster集群那点你不知道的事。

https://mp.weixin.qq.com/s/q9fLtKZnpGmkfFQcrbQj4g 本周是在家办公的一周,上面的图就是我在家的工位。 工欲善其事,必先利其器。在家办公,我是认真的。 在家里开发的时候有需求是这样的:一个如果接口调用失败,需要自动进行重试。 虽然关系不大,但是我还是想到了Dubbo的集群容错策略:Failover Cluster,即失败自动...

0
0
发表于开发技能专区
2018/08/15 17:53

Dubbo服务调用——流程分析

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

3
40
发表了博客
2019/02/22 02:02

React16+Redux 实战企业级大众点评WebApp

第1章 课程介绍 本章主要介绍课程大纲、课程目标,以及开发环境搭建和实战案例演示。 第2章 React项目脚手架:create-react-app 本章介绍React生态中最流行的脚手架:Create React App, 包括安装、基本用法、创建Mock数据等。 第3章 React思维方式:跟着Todo项目学习React思想 本章以Todo项目为例,从React组件化思想角...

0
0
发表了博客
2018/11/26 08:33

Dubbo 源码分析 - 集群容错之 Cluster

1.简介 为了避免单点故障,现在的应用至少会部署在两台服务器上。对于一些负载比较高的服务,会部署更多台服务器。这样,同一环境下的服务提供者数量会大于1。对于服务消费者来说,同一环境下出现了多个服务提供者。这时会出现一个问题,服务消费者需要决定选择哪个服务提供者进行调用。另外服务调用失败时的处理措施也是...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
0 收藏
分享
返回顶部
顶部