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

Селекторы в 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, особенно в приложениях с большим объемом состояния.