Является ли хорошей практикой иметь только одного подписчика на корневом уровне при написании приложения React / Redux?

Question

В прошлом году я написал довольно крупное приложение с использованием React и Redux, у которого был только один подписчик на корневом уровне.Шаблон был (примерно) следующим образом:

const myApp = () => {
  store.subscribe(render);

  render();
};

module.exports = myApp;

const render = () => {
  const rootDOMElement = document.getElementById('root');

  ReactDOM.render(

    <section className="myApp">
      ...
    </section>,
    rootDOMElement

  );
};

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

Теперь, однако, мне интересно, является ли это разумным советом для передачи другим.Я не нашел четкого руководства (хотя, по общему признанию, я мог бы выглядеть сложнее).Обычно создается впечатление, что большинство людей пишут множество компонентов, которые подписываются на магазин в эти дни.См., Например:

https://www.reddit.com/r/javascript/comments/6hperk/i_use_react_and_redux_but_never_reactredux_what/dj0fywb/

Но разве не вся идея React или хотя бы одна из идей о том, что вам не следует беспокоиться о том, что происходит подкапот?Подписка на корневом уровне работает хорошо именно потому, что React достаточно умен, чтобы знать, что не нужно перерисовывать все, верно?Или я упускаю суть?Снова стоит отметить, что мое приложение работало исключительно хорошо, и мне никогда не приходилось думать о производительности.

Answer 1

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

Если вы используете функцию подключения из response-redux, то всем, кто видит ваш компонент, какой редуктор и какой атрибут этого редуктора обновит этот компонент, станет совершенно ясно.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

MyComponent.propTypes = {
  status: PropTypes.number,
};

class MyComponent extends Component {
  render() {
    return (
      <div> { this.props.status } </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    status: state.someReducer.status,
  };
}

function mapDispatchToProps(dispatch) {
  return {}
}

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

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

Так что я думаю, нет. Это не хорошая практика. Хорошая практика - иметь столько подписчиков, сколько компонентов должно быть подписано на некоторые редукторы