В чем преимущество использования Reselect с Redux и React?

В чем преимущество использования Reselect с Redux и React?

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

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

Повторный выбор - это решение. чтобы добавить повторный выбор в наше приложение, нам нужно запустить эту команду в корневом каталоге нашего приложения.

yarn add reselect

затем создайте файл для каждой части состояния, например, если у нас есть продукты или объект корзины в состоянии, мы создаем для них отдельный файл. Например, мы создаем файл внутри каталога redux, который мы создали ранее, и называем его cart.selector.js.

внутри файла селектора корзины мы импортируем createSelector из reselect.

import {createSelector} from ‘reselect’; 

Затем создайте объект, который указывает на весь объект корзины.

const selectCart = state => state.cart;

Теперь пришло время выбрать каждую часть состояния корзины и запомнить каждую часть. В следующем коде мы выбираем элементы корзины и экспортируем их для использования во всех компонентах, которым это может понадобиться.

export const selectCartItems = createSelector([selectCart], cart => cart.cartItems);

Чтобы использовать его в наших компонентах, мы сначала импортируем его и вместе с импортом подключаемся из react-redux.

import {connect } from 'react-redux';
import {selectCartItems} from '../../redux/cart/cart.selectors';

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

const mapStateToProps = (state) => ({
    cartItems: selectCartItems(state),
});
export default connect(mapStateToProps)(Cart);

Теперь вы можете использовать элементы корзины в качестве реквизита внутри вашего компонента, и ваш компонент не будет перерисован, если другая часть состояния будет изменена.

Удачи!