Важно ли «помнить» с Redux?

Question

После прочтения множества статей по React, Redux и мемоизации я хотел бы задать вопрос ... Могу ли я обойтись без этого варианта использования:

Предположим, у меня есть магазин с избыточностью сследующие данные

// reduxStore
module.exports = {
    randomData: [
        { name: 'John', age: 30 },
        { name: 'Peter', age: 25 },
        { name: 'Brenda', age: 15 }
    ];
};

Теперь в моем компоненте я хочу получить средний возраст.Я делаю это примерно так:

import React from 'react';
import { connect } from 'react-redux';

export function TestComponent(props) {
    return <p>The sum of ages is: {props.ageSum}</p>;
}

const mapStateToProps = state => ({
    ageSum: state.randomData.map(datum => datum.age).reduce((acc, curr) => acc + curr)
});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(TestComponent);

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

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

Answer 1

Этот пример будет работать , но это не будет лучше для производительности.

В большинстве случаев вызов map() в вашей функции mapStateToProps приведет к новой ссылке на массиввозвращаетсяРазличные ссылки означают, что результаты не равны предыдущему времени, поэтому ваш компонент будет перерисован.Заметка может помочь гарантировать, что вы генерируете новые ссылки (например, someArray.map()), только когда входные значения фактически изменились.

В вашем случае результат map немедленно передается в reduce(), ииспользуется для расчета суммы.Если предположить, что рассчитанная сумма будет одинаковой каждый раз, ваш компонент не будет повторно визуализироваться, поэтому это не столь важно.

Однако, вероятно, state.randomData не изменился большую часть времени, вв этом случае map().reduce() выполняет ненужную работу.Мемоизация также поможет избежать этого.

См. Документы React-Redux по написанию mapState функций и мой пост Idiomatic Redux: использование селекторных селекторов для инкапсуляции и производительности Подробнее об этом.