Reselect — это библиотека, которая создаёт мемоизированные селекторы в Redux, предотвращая ненужные перерисовки и возвращая закэшированные результаты, когда входные данные не изменились.
Reselect использует createSelector для определения селекторов, которые:
Представь корзину покупок, которая считает сумму товаров, налог и итоговую сумму:
import { createSelector } from 'reselect'
const shopItemsSelector = state => state.shop.items
const taxPercentSelector = state => state.shop.taxPercent
const subtotalSelector = createSelector(
shopItemsSelector,
items => items.reduce((acc, item) => acc + item.value, 0)
)
const taxSelector = createSelector(
subtotalSelector,
taxPercentSelector,
(subtotal, taxPercent) => subtotal * (taxPercent / 100)
)
export const totalSelector = createSelector(
subtotalSelector,
taxSelector,
(subtotal, tax) => ({ total: subtotal + tax })
)
shopItemsSelector, taxPercentSelector) извлекают сырые данныеsubtotalSelector, taxSelector) вычисляют значения только когда меняются входные данныеЕсли в state товары стоимостью $1.20 и $0.95 с налогом 8%:
Каждый селектор запускает свою функцию преобразования только когда обновляются его зависимости, оптимизируя производительность в больших Redux-приложениях.
Функция createSelector в Reselect использует мемоизацию, чтобы гарантировать, что функции трансформации селектора выполняются только при фактическом изменении их входных зависимостей.
Новый — ещё не проверен сообществом
Вы