@d-virt

Как правильно структурировать архитектуру приложения?

Здравствуйте!

Есть страница каталога, на которой располагаются блоки:
1) Фильтры
2) Список TODO
3) Операции (например: в списке каждого элемента есть cheсkobx. При нажатие на какую-нибудь кнопочку в блоке операции, мы берем все выделенные TODO из списка и что-то с ним делаем.)

P.S. использую redux

Суть вопроса в том, что у меня есть контейнер:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from './actions';
import Filter from '../components/Filter'
import List from '../components/List'
import Operations from '../components/Operations'

class PageList extends Component {
    
    render() {
        return <div>
            <Filter params1={this.props.params1} actions={this.props.actions}/>
            <List params2={this.props.params2} actions={this.props.actions}/>
            <Operations params3={this.props.params3} actions={this.props.actions}/>
        </div>;
    }
    
}

function mapState(store) {
    return {
        params1 : store.params1,
        params2 : store.params2,
        params3 : store.params3,
    };
}

function mapDispatch(dispatch) {
    return {
        actions : bindActionCreators(actions, dispatch),
    };
}

export default connect(mapState, mapDispatch)(PageList);


Если мы обновим состояние sotre (хранилище в redux), то контейнер (PageList) заново отредерится и его внутренние компоненты.
Вопрос: как при изменения sotre (хранилище в redux) у меня обновлялись только те компоненты, у которых были изменены props?
P.S. если у меня изменились данные sotre (хранилище в redux) для компоненте Filter, а данные в sotre (хранилище в redux) для компонент List нет и при этом в в компоненте большой список, сравнивать новые пропсы с предыдущими в компоненте List, как-то не резонно.

Спасибо!
  • Вопрос задан
  • 434 просмотра
Решения вопроса 1
В рамках реакта выражения "обновлять только те компоненты, у которых изменились props" - это значит "проверять props в shouldComponentUpdate". По-другому никак. даже если вы сделаете List - контейнером, внутри него тоже выполняется такая проверка.

Но почему вы боитесь проверки props? Вся суть концепции (react+redux), что данные иммутабельны и проверка "что-то изменилось?" - это просто проверка по ссылкам (т.е. очень быстрая, никаких deepEquals).
Команда react'а предлагает официальный add-on shallowCompare:
shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }


Я пока использую https://github.com/gaearon/react-pure-render . Делайте ваши "глупые" компоненты как PureRender и будет вам счастье.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Если вы не хотите сравнивать props с помощью shouldComponentUpdate (пишете, что это не резонно), то я думаю единственный вариант - делать компоненты Filter и List контейнерами (Operations по-желанию, из задачи не понятно, хочется его тоже "не обновлять" или нет)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы