reselect README

The project's README from github.com/reduxjs/reselect. As one markdown file: README.md.

Reselect

npm packageCoverallsGitHub Workflow StatusTypeScript

A library for creating memoized "selector" functions. Commonly used with Redux, but usable with any plain JS immutable data as well.

The Redux docs usage page on Deriving Data with Selectors covers the purpose and motivation for selectors, why memoized selectors are useful, typical Reselect usage patterns, and using selectors with React-Redux.

Installation

Redux Toolkit

While Reselect is not exclusive to Redux, it is already included by default in the official Redux Toolkit package - no further installation needed.

import { createSelector } from '@reduxjs/toolkit'

Standalone

For standalone usage, install the reselect package:

# NPM
npm install reselect

# Yarn
yarn add reselect

# pnpm
pnpm add reselect

Documentation

The Reselect docs are available at https://reselect.js.org, and include usage guides and API references:

Basic Usage

Reselect exports a createSelector API, which generates memoized selector functions. createSelector accepts one or more input selectors, which extract values from arguments, and a result function function that receives the extracted values and should return a derived value. If the generated output selector is called multiple times, the output will only be recalculated when the extracted values have changed.

You can play around with the following example in this CodeSandbox:

import { createSelector } from 'reselect'

interface RootState {
  todos: { id: number; completed: boolean }[]
  alerts: { id: number; read: boolean }[]
}

const state: RootState = {
  todos: [
    { id: 0, completed: false },
    { id: 1, completed: true }
  ],
  alerts: [
    { id: 0, read: false },
    { id: 1, read: true }
  ]
}

const selectCompletedTodos = (state: RootState) => {
  console.log('selector ran')
  return state.todos.filter(todo => todo.completed === true)
}

selectCompletedTodos(state) // selector ran
selectCompletedTodos(state) // selector ran
selectCompletedTodos(state) // selector ran

const memoizedSelectCompletedTodos = createSelector(
  [(state: RootState) => state.todos],
  todos => {
    console.log('memoized selector ran')
    return todos.filter(todo => todo.completed === true)
  }
)

memoizedSelectCompletedTodos(state) // memoized selector ran
memoizedSelectCompletedTodos(state)
memoizedSelectCompletedTodos(state)

console.log(selectCompletedTodos(state) === selectCompletedTodos(state)) //=> false

console.log(
  memoizedSelectCompletedTodos(state) === memoizedSelectCompletedTodos(state)
) //=> true

As you can see from the example above, memoizedSelectCompletedTodos does not run the second or third time, but we still get the same return value as last time.

In addition to skipping unnecessary recalculations, memoizedSelectCompletedTodos returns the existing result reference if there is no recalculation. This is important for libraries like React-Redux or React that often rely on reference equality checks to optimize UI updates.

Terminology

The below example serves as a visual aid:

const outputSelector = createSelector(
  [inputSelector1, inputSelector2, inputSelector3], // synonymous with `dependencies`.
  resultFunc // Result function
)

What's New in 5.0.0?

Version 5.0.0 introduces several new features and improvements:

These updates aim to enhance flexibility, performance, and developer experience. For detailed usage and examples, refer to the updated documentation sections for each feature.

[ ↑ Back to top ↑ ]

License

MIT

References

Click to Expand

Originally inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.

reselect (reduxjs/reselect)

Searching Database…

19K ·GitHub
Reselect
Что это такое?Небольшая библиотека для создания мемоизированных функций-селекторов, которые вычисляют производные данные из вашего состояния. Больше всего известна в связке с Redux, где она позволяет хранить в сторах минимально возможное состояние, но также работает с любыми обычными неизменяемыми данными в JS.
Она привязана к Redux или можно использовать её с любым состоянием?Это обычный npm-пакет без зависимости от Redux — селекторы работают с любыми простыми неизменяемыми данными в JS. В Redux Toolkit он уже встроен по умолчанию, поэтому пользователям RTK ничего дополнительно устанавливать не нужно.
Как добавить её в проект?Если вы используете Redux Toolkit, делать ничего не нужно — он уже включён. Иначе установите отдельный пакет: npm install reselect. На официальном сайте документации есть руководства по использованию и полная справка по API.
Как поймать типичные ошибки в селекторах?В Reselect встроены проверки, работающие только в режиме разработки: inputStabilityCheck запускает селекторы-аргументы дважды и выдаёт предупреждение, если один и тот же вызов возвращает разные результаты, а identityFunctionCheck помечает функции результата, которые просто возвращают свой аргумент. dependencyRecomputations отслеживает пересчёты входных данных.
Почему важно, чтобы селектор возвращал ту же самую ссылку на объект?React и React-Redux оптимизируют обновления, сравнивая ссылки. Поскольку мемоизированный селектор возвращает ссылку на уже существующий результат, когда ничего не изменилось, подключённые компоненты пропускают лишние повторные рендеры вместо того, чтобы обновляться на каждое событие стора.
Что нового в версии 5.0.0?В v5 мемоайзером по умолчанию стал weakMapMemoize, требуется TypeScript 4.7 или новее, а также удалены типы ParametricSelector и вторая перегрузка createStructuredSelector. Производительность TypeScript заметно выросла: можно вкладывать около 30 выходных селекторов вместо примерно 8, прежде чем возникнет ошибка глубокой instantiation типов.
Откуда взялась идея Reselect?В README в качестве первоначальных источников вдохновения упомянуты геттеры в NuclearJS, подписки в re-frame и предложение от speedskater.
What are similar projects?redux-form, zustand, react-redux, nuqs, immer, TypeScript-React-Starter, normalizr, redux
Which topics is it in?composable, redux, state-management, npm-package, caching, utility, developers, web-development, performance, react, npm, frontend
Creator
reduxjs
Size
7.6 MB
Stars
19K
Updated
CommitSep 30Releasev5.3.0Aug 22
Age
11y
Commits · 90 Days