Какая необходимость в mapDispatchToProps в приложении реагировать на избыточность?

Question

Читая много статей и постов на эту тему я понимаю (упрощенно)

mapDispatchToProps()(
    clickHandler: ()=>dispatch(Action)
);

<Component onClick={this.props.clickHandler} />

делает так же, как

<Component onClick={store.dispatch(action)} />

Что выглядит проще, чем иметь все хлопоты с использованием mapDispatchtoProps

Я новичок в редуксе и в целом реагирую и не могу обдумать это. Есть ли реальная необходимость использовать его или это просто хорошая практика кодирования?

Answer 1

Нет абсолютной необходимости использовать mapDisplayToProps, но это будет очень удобно, если ваше приложение будет расти.

Во втором примере вы напрямую получаете доступ к объекту магазина. Это не считается хорошим стилем кодирования, потому что вы связываете свой компонент с глобальным объектом, что затрудняет его тестирование в отдельности или использование его в другом контексте.

Думайте о каждом компоненте как об отдельном программном обеспечении, при этом реквизиты, передаваемые компоненту, являются единственным интерфейсом для остальной части вашего приложения. Это не имеет большого значения для небольших примеров приложений, но окупается в реальных условиях.

Answer 2

Основная идея connect с mapDispatchToProps и mapStateToProps - сделать ваши компоненты пользовательского интерфейса простыми и легко используемыми. Представьте себе, если у вас есть 3 приложения, которые имеют совершенно разную архитектуру (redux, flux, чистый React ContextAPI), но должны повторно использовать одни и те же компоненты пользовательского интерфейса. Если вы инкапсулируете бизнес-логику непосредственно в свои компоненты (пример 2.), то может быть очень трудно или даже невозможно повторно использовать ее, потому что она привязана к некоторому store (в том месте, где вы используете <Component ... />).

Как дополнительный комментарий и хороший пример того, как mapDispatchToProps может сделать ваше приложение чистым, это четкое разделение между бизнес-логикой и компонентом пользовательского интерфейса.

Пример:

У вас есть компонент Button, который используется во всем приложении. Затем вы получаете требование, что вам нужно иметь кнопку выхода из системы в разных местах вашего приложения. Один из способов - создать новый обычный компонент React, который будет использовать компонент Button внутри, а также будет иметь некоторую логику.

connect с mapDispatchToProps приходит вам на помощь и позволяет легко создать новый компонент LogoutButton с присоединенной логикой (который также позволяет вам обновлять состояние избыточности), а затем всякий раз, когда вам нужна кнопка выхода, вы просто используйте LogoutButton и никакой дополнительной логики не понадобится, потому что все это определено внутри mapDispatchToProps и уже присоединено к компоненту Button.

Answer 3

mapDispatchToProps() - это утилита, которая поможет вашему компоненту инициировать событие действия (диспетчерское действие, которое может вызвать изменение состояния приложения)