Reselect README.md(zh-cn)

最新推荐文章于 2024-07-16 17:56:11 发布
最新推荐文章于 2024-07-16 17:56:11 发布
阅读量100 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000016017342
版权

Reselect

Selector library for Redux

针对Redux（和其他）的简单"selector"库，灵感来自NuclearJS的getters，re-frame的subscriptions和来自speedskater这篇议题。

  • Selectors可以计算派生数据，允许Redux储存尽可能小的state。
  • Selectors是高效的。一个selector不会重新计算除非它的参数发生变化。
  • Selectors是可以组合的。他们可以作为其他selector的输入。

你可以在this codepen中尝试以下例子

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 }

安装

npm install reselect

例子

如果你青睐视频教程, 你可以看这里.

Memoized Selectors的动机

The examples in this section are based on the Redux Todos List example.

containers/VisibleTodoList.js

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

在以上的例子，mapStateToProps调用getVisibleTodos来计算todos。这很好，但是这里有一个缺陷：todos在每次state tree更新后会被计算。如果state tree非常大或者高昂计算，每次更新时的重复计算可能导致性能问题。Reselect可以帮助你避免这些不要的重新计算。

创建一个Memoized Selector

我们更愿意使用memoized selector替换getVisibleTodos，当state.todos或者state.visibilityFilter变化时它将重新计算todos，但是当变化发生在state tree其他（不相关的）属性是不会重新计算。

Reselect提供一个方法createSelector来创建memoized selectors。createSelector接受input-selectors数组和一个转换函数作为他的参数。如果Redeux state tree发生变化导致input-selectors的值改变，则选择器将使用input-selectors的值作为参数调用其transform函数并返回结果。

让我们来定义一个memoized selector名叫getVisibleTodos来替换之前non-memoized版本：

selectors/index.js

import { createSelector } from 'reselect'

const getVisibilityFilter = (state) => state.visibilityFilter
const getTodos = (state) => state.todos

export const getVisibleTodos = createSelector(
     [ getVisibilityFilter, getTodos ],
     (visibilityFilter, todos) => {
    switch (visibilityFilter) {
      case 'SHOW_ALL':
        return todos
      case 'SHOW_COMPLETED':
        return todos.filter(t => t.completed)
      case 'SHOW_ACTIVE':
        return todos.filter(t => !t.completed)
    }
  }
)

以上示例，getVisibilityFilter和getTodos是input-selectors。他们作为non-memoized selector函数创建，因为他们不会转换他们所选择的数据。getVisibleTodos则是一个memoized selector。它接受getVisibilityFilter和getTodos作为input-selectors，并且使用转换函数去计算过滤的todos list。

Composing Selectors

一个 memoized selector 自身可以作为其他 memoized selector的一个 input-selector。这里getVisibleTodos被用来作为另一个selector的一个input-selector
用来以keyword进一步过滤数据：

const getKeyword = (state) => state.keyword

const getVisibleTodosFilteredByKeyword = createSelector(
  [ getVisibleTodos, getKeyword ],
  (visibleTodos, keyword) => visibleTodos.filter(
    todo => todo.text.includes(keyword)
  )
)

Connecting 一个 Selector 到 Redux Store

如果你正在使用 React-Redux,你可以在mapStateToProps()内部常规调用selectors：

containers/VisibleTodoList.js

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { getVisibleTodos } from '../selectors' // <-

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state)  // <-
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

在Selectors中获得React Props

本节介绍我们的应用程序的假设扩展，允许它支持多个Todo列表。请注意，此扩展的完整实现需要更改与所讨论主题不直接相关的reducer，components，actions等，并且为简洁起见而省略。

到现在为止我们仅了解到selectors接受Redux store作为参数，但是selectors也能接受props。

这是一个render三个VisibleTodoList组件的App组件,每一个都有一个listId属性

components/App.js

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
  <div>
    <VisibleTodoList listId="1" />
    <VisibleTodoList listId="2" />
    <VisibleTodoList listId="3" />
  </div>
)

每一个VisibleTodoList container 能根据它的listId选取state中不同的片段，所以让我们来调整getVisibilityFilter,getTodos`以接受一个props参数

selectors/todoSelectors.js

import { createSelector } from 'reselect'

const getVisibilityFilter = (state, props) =>
  state.todoLists[props.listId].visibilityFilter

const getTodos = (state, props) =>
  state.todoLists[props.listId].todos

const getVisibleTodos = createSelector(
  [ getVisibilityFilter, getTodos ],
  (visibilityFilter, todos) => {
    switch (visibilityFilter) {
      case 'SHOW_COMPLETED':
        return todos.filter(todo => todo.completed)
      case 'SHOW_ACTIVE':
        return todos.filter(todo => !todo.completed)
      default:
        return todos
    }
  }
)

export default getVisibleTodos

props可由mapStateToProps被传入到getVisibleTodos:

const mapStateToProps = (state, props) => {
  return {
    todos: getVisibleTodos(state, props)
  }
}

到目前为止getVisibleTodos可访问props，这一切看起来很ok。

但是有一个问题

VisibleTodoList container的多个实例使用了 getVisibleTodos selector 将无法正确memoize记忆：

containers/VisibleTodoList.js

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { getVisibleTodos } from '../selectors'

const mapStateToProps = (state, props) => {
  return {
    // WARNING: THE FOLLOWING SELECTOR DOES NOT CORRECTLY MEMOIZE
    todos: getVisibleTodos(state, props)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

一个通过createSelector创建的selector缓存的大小为1，仅当它的参数与先前一次参数相同时返回cache。如果我们在<VisibleTodoList listId="1" />和<VisibleTodoList listId="2" />间交替渲染，共享的selector将交替的接受{listId: 1}和{listId: 2}最为它的props参数。这将会导致每次调用时参数不同所以selector总是会重复计算而不是使用缓存值。我们将在下一节看到如何解决这个局限。

Sharing Selectors with Props Across Multiple Component Instances

此示例要求React Redux v4.3.0 或更高
一个可以替换的方案可以在 re-reselect中找到

为了在多个VisibleTodoList实例共享一个selector，每一个示例组件都需要拥有属于自己的selector私拷贝。

让我们创建一个函数名叫makeGetVisibleTodos用来在每次调用时返回一个新的getVisibleTodos selector 拷贝

selectors/todoSelectors.js

import { createSelector } from 'reselect'

const getVisibilityFilter = (state, props) =>
  state.todoLists[props.listId].visibilityFilter

const getTodos = (state, props) =>
  state.todoLists[props.listId].todos

const makeGetVisibleTodos = () => {
  return createSelector(
    [ getVisibilityFilter, getTodos ],
    (visibilityFilter, todos) => {
      switch (visibilityFilter) {
        case 'SHOW_COMPLETED':
          return todos.filter(todo => todo.completed)
        case 'SHOW_ACTIVE':
          return todos.filter(todo => !todo.completed)
        default:
          return todos
      }
    }
  )
}

export default makeGetVisibleTodos

我们还需要一种方法来为容器的每个实例提供对其自己的私有选择器的访问权限。 connect的mapStateToProps参数可以帮助解决这个问题。

If the mapStateToProps argument supplied to connect returns a function instead of an object, it will be used to create an individual mapStateToProps function for each instance of the container.

以下例子中makeMapStateToProps创建了一个新的getVisibleTodos selector, 并返回了一个mapStateToProps拥有对新selector的独占访问权限

const makeMapStateToProps = () => {
  const getVisibleTodos = makeGetVisibleTodos()
  const mapStateToProps = (state, props) => {
    return {
      todos: getVisibleTodos(state, props)
    }
  }
  return mapStateToProps
}

如果我们把makeMapStateToProps传入到connect, 没一个VisibleTodoList container实例将会获得属于自己的mapStateToProps方法（带有私有getVisibleTodos selector）。这下Memoization将正常工作。

containers/VisibleTodoList.js

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { makeGetVisibleTodos } from '../selectors'

const makeMapStateToProps = () => {
  const getVisibleTodos = makeGetVisibleTodos()
  const mapStateToProps = (state, props) => {
    return {
      todos: getVisibleTodos(state, props)
    }
  }
  return mapStateToProps
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  makeMapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

API

createSelector(...inputSelectors | [inputSelectors], resultFunc)

接受一个或多个selectors，或者一个selectors数组，计算他们的值并将值当作传输传入到resultFunc。

createSelector通过在调用之间使用reference equality（===）决定一个来自input-selector返回的值是否发生变化。使用createSelector创建的输入selector应该是不可变的（immutable）。

使用createSelector创建的Selectors的缓存大小为1。这意味这他们总会重新计算当一个input-select的值改变，一个选择器只会存储每个input-selector的前一次值（pre-value： 类比pre-state）

const mySelector = createSelector(
  state => state.values.value1,
  state => state.values.value2,
  (value1, value2) => value1 + value2
)

// You can also pass an array of selectors
const totalSelector = createSelector(
  [
    state => state.values.value1,
    state => state.values.value2
  ],
  (value1, value2) => value1 + value2
)

从selector中访问组件的props可能很有用。当一个Selector通过connectconnected到一个组件，组件的props被作为selector的第二个参数传入：

const abSelector = (state, props) => state.a * props.b

// props only (ignoring state argument)
const cSelector =  (_, props) => props.c

/ state only (props argument omitted as not required)
const dSelector = state => state.d

const totalSelector = createSelector(
  abSelector,
  cSelector,
  dSelector,
  (ab, c, d) => ({
    total: ab + c + d
  })
)
weixin_34167043
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
reselect-redux中间件使用总结
广场巡游
03-25 2166
为什么使用reselect mapStateToProps调用其中函数去计算某个状态。这个状态在每一次组件更新的时候都会重新计算。如果state树的结构比较大或者运算复杂,每一次组件更新的时候都进行计算的话，将会导致性能问题.Reselect能够帮助redux来避免不必要的重新计算过程。 reselect主要API使用 createSelector(…inputSelectors|[inputS...
re-reselect:通过更深入的备忘录和缓存管理来增强“重新选择”选择器
04-12
重新选择 re-reselect是围绕的轻量级包装，旨在通过更深的备忘录和缓存管理来增强选择器。 使用默认reselect reselect选择器在不同参数之间切换会导致缓存无效，因为默认reselect缓存的限制为1 。 re-reselect将不同的调用转发到存储在缓存中的不同的reselect选择器，以便保留计算/存储的值。 re-reselect选择工作的正常reselect选择，但他们能够确定时创建一个新的选择或查询在运行缓存，具体取决于所提供的参数。 对以下有用： 当使用一个/几个不同的参数顺序调用时，保留选择器的缓存（） 将类似的选择器合并为一个 在多个组件实例之间与道具共享选择器（请参阅和） 在运行时实例化选择器 使用增强reselect import { createCachedSelector } from 're-reselect' ; // Nor
Reselect的学习以及一些思考
qxy_XWM的博客
09-06 503
Reselect简介前言正文思考`普通写法``进阶写法` 前言 我们平时在使用react-redux时，用到最多的函数大概就是mapStateToProps和mapDispatchToProps。其中， mapStateToProps函数允许我们将 store 中的数据作为 props 绑定到组件上，它的第一个参数就是 Redux 的整个状态树(state)： const Counter = pr...
reselect
luqingxuan
12-20 123
reselect
Reselect源码分析
yydounai的博客
04-25 374
Reselect库可以创建可记忆的(Memoized)、可组合的selector函数。Reselect selectors 可以用来高效地计算 Redux store 里的衍生数据。react通过connect高阶组件将redux与react连接，当redux更新时，如果不使用Reselect库时，每当组件更新重新计算衍生数据有可能会造成不必要的性能浪费，通过阅读源码了解到Reselec...
reselect源码阅读
flytam的博客
05-13 865
reselect源码阅读 之前就听闻了reselect是一个用于react性能优化的库，并且源码只有100多行。可谓短小精悍，今天来阅读一波膜拜大佬们的思想 import { createSelector } from 'reselect' const shopItemsSelector = state =&gt; state.shop.items const taxPercen...
前端开源库-reselect-tree.zip
10-05
"reselect-tree"是一个专为前端设计的开源库，它基于Reselect库，并针对数据树形结构进行了优化，旨在帮助开发者更高效地处理和管理复杂的数据结构，特别是在显示和操作树状数据时。下面我们将深入探讨"reselect-...
前端项目-reselect.zip
09-02
而`reselect`是专门为Redux设计的一个高效选择器库，它的主要作用是优化数据获取和计算，从而提高应用性能。 `reselect`库的核心理念是创建可复用的选择器（selector）。选择器类似于计算属性，它们接收存储在Redux...
Reselect:Redux选择器库-开源
04-25
Reselect提供了一个用于创建记忆选择器的createSelector函数。 createSelector将输入选择器数组和一个转换函数作为其参数。 如果Redux状态树发生突变，导致输入选择器的值发生更改，则选择器将使用输入选择器的值...
ownprops-reselect
05-15
import { ownProp , ownPropsSelector } from 'ownprops-reselect' ; const somePropSelector = ownProp ( 'someProp' ) ; createSelector ( [ somePropSelector , ] , ( someProp ) => someProp + 1 ) ; // ...
reselect-utils:选择器的帮助程序和实用程序的集合
05-14
yarn add reselect-utils npm install reselect-utils 动机 诸如“和“试图解决存储任务。 但是，对于某些应用问题，没有标准的解决方案。 创建该库是为了尝试系统地解决以下问题： 使用可选对象作为选择源。 将...
用reselect提高数据获取性能
AnitaSun的博客
06-27 361
引入 获取当前应该显示的待办事项，就是根据Redux Store状态树上的todos和filter两个字段上的值计算出来。但这个计算过程要遍历todos字段上的数组，当数组比较大的时候，对于TodoList组件的每一次重新渲染都重新计算一遍，就会显得负担过重了。 两阶段选择过程 如果Redux Store状态树上代表所有待办事项的todos字段没有变化，而且代表当前过滤器的filter字段也没有变化，那么实在没有必要重新遍历整个todos数组来计算一个新的结果 reselect库的工作原理：只要相关
GitHub上README写法暨GFM语法解读
weixin_30730053的博客
04-15 2653
转载请保留原作者guodongxiaren的原文地址。 自从开始玩GitHub以来，就越来越感觉它有爱。最近对它的README.md文件颇为感兴趣。便写下这贴，帮助更多的还不会编写README文件的同学们。 README文件后缀名为md。md是markdown的缩写，markdown是一种编辑博客的语言。用惯了可视化的博客编辑器（比如CSDN博客，囧），这种编程式的博客编辑方案着实...
更新商品前端接口编写
weixin_55639995的博客
07-12 402
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 753
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 512
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 222
vue 自定义滚动条同步拖动（移动端）
vue搜索框过滤--- computed、watch区别
最新发布
学习笔记分享给大家
07-16 239
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
chronyc reselect
01-18
`chronyc reselect`命令用于强制chronyd重新选择最佳的时钟源。执行该命令后，chronyd会重新评估可用的时钟源，并选择最佳的时钟源进行时间同步。 请注意，执行`chronyc reselect`命令需要具有root权限或者使用sudo...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值