Является ли хорошей практикой иметь только одного подписчика на корневом уровне при написании приложения React / Redux?
В прошлом году я написал довольно большое приложение с использованием 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 в целом будет повторно рендерить только те компоненты-потомки, которые на самом деле нужно было повторно рендерить. Это работало исключительно хорошо, даже когда приложение масштабировалось до тысяч экземпляров компонентов.
Однако теперь мне интересно, можно ли передать этот совет другим. Я не нашел четких указаний (хотя, по общему признанию, я мог бы поискать более внимательно). Обычно у меня складывается впечатление, что в наши дни большинство людей пишут множество компонентов, которые подписываются на магазин. См., Например:
Но разве сама идея React или хотя бы одна из идей не в том, что вы не должны беспокоиться о том, что происходит под капотом? Подписка на корневом уровне работает хорошо именно потому, что React достаточно умен, чтобы знать, что не нужно все рендерить заново, верно? Или я упустил суть? Опять же, стоит отметить, что мое приложение работало исключительно хорошо, мне никогда не приходилось задумываться о производительности.
Ответы 1
Создавая приложение, нужно думать не только о его производительности. Помимо многого другого, здесь есть ясность и очевидный код, простота разработки и сопровождения.
Если вы используете функцию connect из react-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 для проверки типов значений редуктора, которые передаются в props, что облегчает тестирование компонентов.
Думаю, нет. Это не лучшая практика. Хорошая практика - иметь столько подписчиков, сколько компонентов должно быть подписано на некоторые редукторы.
с помощью response вы должны следовать шаблону реакции и использовать connect и Provider с Redux. Вы можете проверить это stackoverflow.com/questions/49952857/…