Что такое селекторы и как их использовать? Какие есть библиотеки?

Селекторы в Redux используются для извлечения данных из глобального состояния, которые затем передаются компонентам. Вместо прямого доступа к состоянию через state.someProperty, селекторы предоставляют абстрактный и повторно используемый способ получения данных.

Простой пример селектора:

const selectTodos = (state) => state.todos;

// Использование:
const todos = selectTodos(store.getState());

Когда состояние становится сложным, селекторы могут комбинировать данные:

const selectCompletedTodos = (state) =>
  state.todos.filter((todo) => todo.completed);

const completedTodos = selectCompletedTodos(store.getState());

Для оптимизации и предотвращения повторных вычислений используется библиотека reselect:

Установка:

npm install reselect

Создание мемоизированного селектора:

import { createSelector } from 'reselect';

// Примитивные селекторы
const selectTodos = (state) => state.todos;
const selectFilter = (state) => state.filter;

// Комбинированный селектор
const selectFilteredTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => {
    switch (filter) {
      case 'completed':
        return todos.filter((todo) => todo.completed);
      case 'active':
        return todos.filter((todo) => !todo.completed);
      default:
        return todos;
    }
  }
);

const filteredTodos = selectFilteredTodos(store.getState());

Преимущества использования reselect:

- Мемоизация: результаты селектора пересчитываются только при изменении входных данных.

- Удобная работа с вложенными состояниями.

- Повышение производительности, особенно в больших приложениях.

Библиотеки для работы с селекторами:

- reselect: Самая популярная библиотека для создания мемоизированных селекторов.

- re-reselect: Расширение reselect, которое позволяет создавать селекторы с кешированием на основе параметров.

- redux-toolkit: Включает встроенную поддержку мемоизированных селекторов через API createSelector.

Селекторы обеспечивают простой, производительный и организованный доступ к данным в Redux, особенно в приложениях с большим объемом состояния.