2

Добрый день. В приведенном примере ниже я осуществляю connect в react приложении с состоянием redux. Если я правильно понимаю, то функция mapStateToProps не только добавляет данные из состояний в props, но она и отвечает за рендеринг компонента.

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

const mapStateToProps = function (store, props) {
    return {
        leagues: store.sport[props.sid]
    };
};

export default connect(mapStateToProps)(Sport);

Но что делать , если я хочу передать в качестве параметра leagues в компонент объект с данными?

В данном примере я ВСЕГДА возвращал ОДИНАКОВЫЙ объект leagues, но рендеринг все равно выполнялся. Получается когда мы возвращаем объект, редукс не может его сравнить с предыдущим и вызывает render() ?

Вопрос. Как возвращать объект в mapStateToProps leagues, и при этом чтобы рендеринг компонента не выполнялся лишний раз. Спасибо

2 ответа 2

1

mapStateToProps выполняет преобразование состояния, которое собирается при вызове всех reducer в единый объект, который передается в свойства (props) компоненту и вызывается каждый раз при обновлении стора-состояния. Обновление стора происходит тогда, когда хоть один из reducer возвращает новое состояние-объект.

mapStateToProps предотвратит рендер компонента в том случаи если props не изменились, а определяет он это с помощью неглубокого сравнения. Неглубокое сравнение это когда проверяется только первый уровень данных.

Именно поэтому в reducer состояние должно быть иммутабельным-неизменяемым.

2
  • по вашей логике, нельзя в состояниях хранить даже просто обычный массив? В котором будут перечислены id чего либо
    – devn
    29 мар 2017 в 14:48
  • нет, не так. Вы можете там хранить что угодно, главное чтобы эти данные не мутировали.
    – user220409
    29 мар 2017 в 19:39
0

В вашем примере, если рендеринг компонента выполнялся всегда, то это значит, что либо менялись собственные props компонента (помимо sid), либо содержимое store.sport[props.sid]. Посмотрите внимательно, как именно вы обновляете store.sport в соответствующем редьюсере.

1
  • Так как все данные приходят сразу, я их сразу и заменяю в редьюсере. Данные приходят аяксом
    – devn
    30 мар 2017 в 12:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.