Если вы когда-либо использовали Redux с React, вы, вероятно, уже знаете, что компоненты React совершенно не знают о Redux, пока вы не соедините их. Для этого мы используем connect (); функция, предназначенная именно для этого. Однако было бы излишним подключать каждый отдельный компонент к хранилищу Redux. Кажется, что лучше всего подключать компоненты контейнера и передавать эту информацию своим потомкам по мере необходимости. Это можно сделать, сопоставив состояние и действия Redux с реквизитами в родительском контейнере с помощью mapStateToProps и mapDispatchToProps. MapStateToProps довольно прост; вы можете использовать оператор распространения и передать все хранилище Redux как объект через свойства каждого дочернего компонента, например:
Точно так же, как только вы импортировали файл действий в родительский компонент, вы можете передать действия как свойства, используя mapDispatchToProps. Эта функция берет каждую функцию действия, которую вы написали, и помещает их в функцию диспетчеризации Redux. Dispatch - единственная функция, которая вызывает изменение состояния Redux. Таким образом, каждое действие в вашем файле действий должно быть заключено в функцию отправки, которая затем запускает действие, предупреждает редуктор типа действия и запускает эти обновления. Если вы хотите глубже погрузиться в то, как работает диспетчеризация, вы можете прочитать документацию Redux здесь. MapDispatchToProps похож на mapStateToProps, но, опять же, требует этого дополнительного шага по упаковке ваших функций в диспетчеризацию.
В верхней части этого файла я импортировал свой файл действий как «searchActions». MapDispatchToProps создает объект с ключевыми значениями, разделяющими имя каждой функции в моем файле действий. Эти ключи указывают на функцию действия, заключенную в диспетчеризацию, так что при передаче в props дочерние компоненты могут обращаться к этим действиям и вызывать их без явного подключения к хранилищу Redux! Это замечательно и очень удобно, когда вы начинаете создавать более сложные приложения React / Redux. Тем не мение; что происходит, когда ваш файл действий начинает ДЕЙСТВИТЕЛЬНО расти? Каждый раз, когда вы добавляете функцию в свой файл действий, вы должны возвращаться к каждому контейнеру, который может использовать эту функцию, и добавлять еще одну пару ключ: значение в вашу функцию mapDispatchToProps, которая будет переносить это новое действие в диспетчеризацию. Это может быть очень утомительно и отнимать много времени для таких больших приложений, и это может легко привести к ошибкам, если вы забудете добавить его в тот или иной родительский компонент. Введите: bindActionCreators.
BindActionCreators - действительно удобный метод, когда вы имеете дело с большим количеством действий в приложении. Приведенный выше фрагмент делает ТОЧНО то, что мы делали в исходном фрагменте mapDispatchToProps, однако: с помощью bindActionCreators вы можете передать весь файл действия как объект, и каждая функция в этом объекте будет затем заключена в функцию отправки для вас! Поэтому, если вы обнаружите, что постоянно добавляете новые функции действий, вы можете пропустить беготню по необходимости возвращаться к родительским компонентам и каждый раз добавлять новые функции в mapDispatchToProps. Довольно крутой трюк, да? Вот как это сделать:
Убедитесь, что в верхней части файла импортируете все свои действия, используя *, и используйте «as», чтобы указать имя для вашего объекта действий. Импортируйте bindActionCreators из «redux» и подключайтесь из «react-redux» (они уже должны быть частью вашего пакета npm, но если это не так, обязательно сначала установите эти модули узлов!)
Затем вы можете использовать mapStateToProps как обычно. При настройке mapDispatchToProps вы хотите вернуть новый объект, используя оператор распространения в bindActionCreators, и передать свой объект действий (который вы назвали при импорте) вместе с отправкой. BindActionCreators творит чудеса, оборачивая каждую функцию диспетчером за вас!
Теперь нам нужно передать mapStateToProps и mapDispatchToProps нашей функции подключения. Вот еще один совет (это можно сделать с помощью bindActionCreators или без него). Хотя вполне допустимо просто передать эти новые объекты функции подключения следующим образом:
Имея дело с более крупными приложениями, вы можете захотеть немного упорядочить все эти реквизиты. Вы можете назвать каждый ТИП опоры под ключевыми именами, чтобы вы могли отслеживать, откуда берется каждая опора. Например:
На первый взгляд это может показаться немного запутанным, поэтому давайте разберемся с ним. Сначала мы экспортируем значение по умолчанию и вызываем функцию подключения с помощью mapStateToProps и mapDispatchToProps как обычно. Однако затем мы видим еще один набор круглых скобок, содержащий три объекта prop, называемых stateProps, dispatchProps и ownProps. StateProps и dispatchProps - это объекты, созданные функциями mapStateToProps и mapDispatchToProps соответственно, и ownProps относится к, как вы уже догадались; ваши СОБСТВЕННЫЕ свойства, которые вы можете передавать дочерним компонентам. Вставив сюда стрелочную функцию, мы можем присвоить этим объектам ключевое имя, чтобы облегчить их вызов позже. В приведенном выше примере мы передаем свойства состояния с помощью оператора распространения. Мы хотим включить их все, но не нужно назначать объекту отдельное имя (хотя вы можете, если хотите). Мы устанавливаем объект ownProps на имя ключа «router», потому что реквизиты роутера поступают от response-router, и они передаются от родителя к потомку, как и любое другое свойство. Здесь я просто называю их маршрутизаторами, поскольку они являются единственными опорами вне состояния и отправки в моем приложении, которые передаются вниз. Наконец, мы устанавливаем реквизиты диспетчеризации для ключевого имени «действия». Установив эти имена, мы можем затем вызывать реквизиты внутри дочерних элементов следующим образом:
Чтобы сделать его более организованным, вместо того, чтобы говорить «this.props.fetchStartingLocation», мы можем указать, что эта опора находится в объекте действий, чтобы мы знали, что это не просто еще одна функция, передаваемая как опора от родителя. составная часть. Это просто немного синтаксического сахара, чтобы помочь вам и тем, кто читает ваш код, понять, где найти каждую функцию, если им понадобится к ней доступ.
Я был очень взволнован, узнав о bindActionCreators; это экономит время и предотвращает ненужные ошибки, предотвращая необходимость возвращаться и добавлять функции к вашей функции mapDispatchToProps с каждым новым дополнением к вашим действиям. Надеюсь, это поможет вам очистить ваши собственные проекты React / Redux в будущем!
