Reselect

• селекторы
• мемоизация
• композиция
• reduxjs/reselect

Reselect - Install

npm install reselect
    

Reselect - Example

import { createSelector } from 'reselect';

const shopItemsSelector
    = state => state.shop.items;

const taxPercentSelector
    = state => state.shop.taxPercent;
    

Reselect - Example

const subtotalSelector = createSelector(
  shopItemsSelector,

  items => items.reduce(
    (acc, item) => acc + item.value,
    0
  )
);
    

Reselect - Example

const taxSelector = createSelector(
  subtotalSelector,
  taxPercentSelector,

  (subtotal, taxPercent) =>
      subtotal * (taxPercent / 100)
);
    

Reselect - Example

export const totalSelector = createSelector(
  subtotalSelector,
  taxSelector,

  (subtotal, tax) => subtotal + tax
);
    

Reselect - Example

const exampleState = {
  shop: {
    taxPercent: 8,
    items: [
      { name: 'apple', value: 1.20 },
      { name: 'orange', value: 0.95 },
    ]
  }
};
    

Reselect - Example

console.log(subtotalSelector(exampleState))
// 2.15

console.log(taxSelector(exampleState))
// 0.172

console.log(totalSelector(exampleState))
// 2.322
    

Reselect - createSelector

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

Reselect - createSelector

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

Reselect - createSelector

const totalSelector = createSelector(
  [
    state => state.values.value1,
    state => state.values.value2
  ],
  (value1, value2) => value1 + value2
)
    

Reselect - createSelector

const mySelector = createSelector(
  (input1, input2) => input1.value + input2.value,
  (input1, input2) => input1.value - input2.value,
  (value1, value2) => value1 + value2
)

mySelector({ value: 4 }, { value: 2 })
    

Reselect - defaultMemoize

defaultMemoize(
  func,
  equalityCheck = defaultEqualityCheck
)
    

Reselect - createSelectorCreator

createSelectorCreator(
  memoize,
  ...memoizeOptions
)
    

Reselect - createSelectorCreator

const custom = createSelectorCreator(
  customMemoize,
  option1, // 2nd param to customMemoize
  option2, // 3rd
  option3, // 4th
)
    

Reselect - createSelectorCreator

const customSelector = custom(
  input1,
  input2,
  resultFunc // 1st param to customMemoize
)

// customMemoize(resultFunc, option1, option2, option3)
    

Reselect - Deep equal

import {
  createSelectorCreator,
  defaultMemoize
} from 'reselect';

import isEqual from 'lodash.isEqual';

const deep = createSelectorCreator(
  defaultMemoize,
  isEqual
);

const mySelector = deep(
  state => state.values.filter(val => val < 5),
  values => ...
);
    

Reselect - Unlimited cache

import {
  createSelectorCreator
} from 'reselect';

import memoize from 'lodash.memoize'

const hash = (...args) => args.reduce(
  (acc, val) => acc + '-' + JSON.stringify(val),
  ''
);

const unlimited = createSelectorCreator(
  memoize,
  hashFn
);

const selector = unlimited(...);
    

Reselect - createStructuredSelector

createStructuredSelector(
  {inputSelectors},
  selectorCreator = createSelector
)
    

Reselect - createStructuredSelector

const mySelectorA = state => state.a;
const mySelectorB = state => state.b;

const structuredSelector
  = createStructuredSelector({
    x: mySelectorA,
    y: mySelectorB
  });

const result = structuredSelector({ a: 1, b: 2 });
// { x: 1, y: 2 }
    

Reselect - createStructuredSelector

const nestedSelector = createStructuredSelector({
  subA: createStructuredSelector({
    selectorA,
    selectorB
  }),
  subB: createStructuredSelector({
    selectorC,
    selectorD
  })
})
    

Reselect - Factory

const expensiveItemSelectorFactory = minValue =>
  createSelector(
    shopItemsSelector,
    items =>
      items.filter(item => item.value > minValue)
  );

const subtotalSelector = createSelector(
  expensiveItemSelectorFactory(200),
  ...
);