精华内容
下载资源
问答
  • import { createSelector } from '@ngrx/store'; export interface State { evenNums: number[]; oddNums: number[]; } export const selectSumEvenNums = createSelector( (state: State) => state....

    看一段源代码:

    import { createSelector } from '@ngrx/store';
    
    export interface State {
        evenNums: number[];
        oddNums: number[];
      }
       
    export const selectSumEvenNums = createSelector(
        (state: State) => state.evenNums,
        evenNums => evenNums.reduce((prev, curr) => prev + curr)
      );
    
      export const selectSumOddNums = createSelector(
        (state: State) => state.oddNums,
        oddNums => oddNums.reduce((prev, curr) => prev + curr)
      );
    
      export const selectTotal = createSelector(
        selectSumEvenNums,
        selectSumOddNums,
        (evenSum, oddSum) => evenSum + oddSum
      );
       
      let result = selectTotal({
        evenNums: [2, 4],
        oddNums: [1, 3],
      });
      
      console.log('Ethan', result);
    

    名为selectTotal的这个复合selector的消费方式很特别,直接传一个初始state进去即可:

    第一次计算,因此缓存里没有lastResult,缓存没有命中,所以开始计算。

    调用projectionFn.apply, 将arguments传入,进行计算:

    已经在计算 6 + 4 了:

    state就是传入的输入值:

    先把偶数值全部求和:

    更多Jerry的原创文章,尽在:“汪子熙”:

    展开全文
  • createSelector实现代码里,前面n - 1 个参数都是selector,只有最后一个是projection函数: 将输入参数里包含的selector和projector依次提取出来: 将传入的selector和projector改造成memoized版本的函数,即可以...

    createSelector实现代码里,前面n - 1 个参数都是selector,只有最后一个是projection函数:

    将输入参数里包含的selector和projector依次提取出来:

    将传入的selector和projector改造成memoized版本的函数,即可以缓存当前计算时传入的输入参数:

    返回构造完毕的selector结果:

    查看createSelector工具函数返回的构造而成的selector,从其实现源码能够判断出,这是一个具有记忆功能的selector:

    这是两个selector和一个projection的组合:

    两个selector:

    更多Jerry的原创文章,尽在:“汪子熙”:

    展开全文
  • import { createSelector } from '@ngrx/store'; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const ...

    源代码:

    import { Component } from '@angular/core';
    import { createSelector } from '@ngrx/store';
     
    export interface State {
      counter1: number;
      counter2: number;
    }
     
    export const selectCounter1 = (state: State) => state.counter1;
    export const selectCounter2 = (state: State) => state.counter2;
    export const selectTotal = createSelector(
      selectCounter1,
      selectCounter2,
      (counter1, counter2) => counter1 + counter2
    ); // selectTotal has a memoized value of null, because it has not yet been invoked.
    

    createSelector 内部:

    function createSelector(...input) {
        return createSelectorFactory(defaultMemoize)(...input);
    }
    

    defaultMemoize 返回一个对象,每个字段指向一个函数:

    输入参数我传入了三个纯函数,即没有 side effect,可以重复执行的函数。这三个纯函数被维护到了一个数组内:

    进入到 createSelectorFactory 返回的函数体内部:

    从源代码可以看出,createSelector接收的可变数目的参数,最后一个被当成 projector 看待,其余均视作 selector.

    分下列几种情况讨论:

    (1) 第一次执行,lastArguments undefined, 进入该 IF 分支,执行 projection,将结果保存,并返回。
    (2) 如果是重复执行,且输入参数没有变化,则直接返回上一次执行的结果
    (3) 执行到这里,说明是重复执行,且参数发生了变化,则重新执行 projection
    (4) 如果再次执行和前次执行的结果相同,返回前次结果

    createSelector 最终返回的,是带有记忆功能的 selector:

    以后如若要调试,记住代码的大概位置在 970,搜索关键字 memoized.

    更多Jerry的原创文章,尽在:“汪子熙”:

    展开全文
  • createSelector尖括号内三个参数: 类型参数 State:state类型,应用程序自行定义 S1:number[] ,projector输入参数的类型: number:projector输出参数的类型 看另一个例子: Selector<T, V>是一个类型...

    createSelector尖括号内三个参数:

    类型参数

    1. State:state类型,应用程序自行定义
    2. S1:number[] ,projector输入参数的类型:
    3. number:projector输出参数的类型

    看另一个例子:

    Selector<T, V>是一个类型alias,代表一个箭头函数,该箭头函数的输入类型是T,输出类型是V:

    输入state类型为T,输出类型为V

    更多Jerry的原创文章,尽在:“汪子熙”:

    展开全文
  • reselect中createSelector的用法及github代码解读 reselect是一个redux中间件,github上有对应的文档:https://github.com/reduxjs/reselect createSelector的使用例程如下: import { createSelector } from '...
  • import { createSelector } from '@ngrx/store'; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1...
  • A selector created with createSelector has a cache size of 1 and only returns the cached value when its set of arguments is the same as its previous set of arguments. If we alternate between rendering...
  • list.service.ts的getData方法里的this.load触发时,this实际指向UserListService: 触发点还是list页面的async pipe: ...这里才执行createSelectorcreateSelector的返回结果: 返回一个Observable
  • OrganizationState作为createSelector的第二个参数,即projector,箭头函数的输入参数。 左边的大写字符串是常量: b2bUser是在Management数据类型的基础上,增添了三个新字段: approvers permissions user...
  • 使用 createSelector 和 createFeatureSelector 函数时,@ngrx/store 会跟踪调用选择器函数的最新参数,在 ngrx-store.js 里完成。 因为选择器是纯函数,当参数匹配时可以返回最后一个结果,而无需重新调用选择器...
  • 强制将createSelector结果直接分配给选择器函数。 错误的: const fooSelector = ( ) => createSelector ( ) ; 正确的: const fooSelector = createSelector ( ) ; redux-reselect/prefer-selector-ref 强制...
  • ownprops-reselect-源码

    2021-05-15 14:32:09
    createSelector ( [ somePropSelector , ] , ( someProp ) => someProp + 1 ) ; // or createSelector ( [ ownPropsSelector ] , ( ownProps ) => ownProps . someProp ) ; 执照 麻省理工学院
  • react-selector-hooks 基于钩子的记忆选择器工厂的集合,用于渲染之外的声明。... } API createSelector(resultFunc) import * as React from 'react' import { createSelector } from 'react-selecto
  • ** You never call createSelector in your `selectors.js` ** import { createSelector } from 'reselect' */ const shopItemsSelector = state => state . shop . items const taxPercentSelector = state => ...
  • const getFirstItemSelector = createSelector ( 0 ) const item = getFirstItemSelector ( data ) console . log ( item ) // It'll display 'John' 获取第一项的名称 const data = { item : { name : 'Television'...
  • import createSelector from 'rememo' ; const getTasksByCompletion = createSelector ( // The expensive computation: ( state , isComplete ) => state . todo . filter ( ( task ) => task . complete ===...
  • import { createSelector } from 'redux-views' ; const getAllCars = state => state . cars ; const getRunningCars = createSelector ( [ getAllCars ] , cars => cars . filter ( car => car . isRunning ) )...
  • Reselect提供了一个用于创建记忆选择器的createSelector函数。 createSelector将输入选择器数组和一个转换函数作为其参数。 如果Redux状态树发生突变,导致输入选择器的值发生更改,则选择器将使用输入选择器的值...
  • 我自己的简单Redux和其他支持库的实现。 实施的: 还原 createStore ... createSelector createStructuredSelector 重新组成 setStatic onlyUpdateForKeys 中间件 loggerMiddleware thunk中间件 pro
  • 重新选择 简单的“选择”库由干将的启发终极... import { createSelector } from 'reselect' const shopItemsSelector = state => state . shop . items const taxPercentSelector = state => state . shop . taxPerc
  • 无法直接在createSelector内部访问state属性 expect-gen-run 使用expectGen时必须调用run或toJSON module-boundary 该规则将检查所有导入/要求,以确保它不会进入顶层的“ notion-modules包中 有效的 import { ...
  • 重新为Redux选择简单的“选择器”库,其灵感来自NuclearJS中的吸气剂,重新设计的订阅以及speedskater的建议。 选择器可以计算派生数据,从而使Redux可以...您可以在此Codepen中处理以下示例:import {createSelector}
  • import { createSelector } from "reselect" ; import { createArraySelector } from "reselect-map" ; const exampleState = { numbers : [ 1 , 2 , 3 ] , multiplier : 5 , } ; const numbers = ( state ) => ...
  • 重新计算 替代“选择器”库(适用于 Redux 和其他),灵感来自 MobX、Aurelia 和 Angular 的 Reselect 和 Computed 属性。... import { createSelector , createObserver , setState } from '@jvite
  • 传入select方法的fromExample.getCounterCounter是一个createSelector返回的值: 执行select操作: pathOrMapFn就是fromExample.getCounterCounter指向的值: 注意,Store是Observable的子类,这个select是Store...
  • js: data: { step:0, winWidth:0, winHeight:0, currentLeft:0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this;... var query = wx.createSelector...
  • counter$: Observable; 这个store的初始化不需要应用开发人员操心,直接通过构造函数参数的...getCounterCounter这个选择器 又是通过另一个选择器和mapping function通过createSelector加工而成的。Mapping函数一般是

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 314
精华内容 125
关键字:

createselector