Блог

Я просматривал некоторый код react — redux и застрял на приведенном ниже фрагменте кода

 const mapDispatchToProps=dispatch=>({
    addComment: (dishId, rating, author, comment) => dispatch(addComment(dishId, rating, author, comment))
 })
  

Я не настолько опытен в Javascript, поэтому было бы неплохо получить разъяснение о том, что выполняет этот метод mapDispatchToProps.

Я знаю, что это за метод, я просто запутался в части Javascript

mapDispatchToProps является вторым аргументом connect функции в redux. mapStateToProps является первым. Вы определяете mapDispatchToProps как функцию dispatch , которая возвращает объект. Синтаксис const something = dispatch => ({ ... }) является сокращением для функции arrow, которая возвращает объект. Это почти то же самое, что

 function mapDispatchToProps(dispatch){
  return {
    addComment: (dishId, ...) => dispatch(addComment(dishId, ...))
  }
}
  

Когда вы передаете данные mapDispatchToProps в connect , а затем оборачиваете свой компонент в это connect , он вводит свойства и методы возвращаемого объекта в компонент в качестве реквизитов. Отсюда и название mapXToProps . Обычно он будет использоваться следующим образом:

 export default connect( mapStateToProps, mapDispatchToProps )(Component)
  

Если у вас его нет mapStateToProps , используйте null вместо него. mapDispatchToProps позволяет вам внедрять ваши действия redux в ваш компонент, чтобы вы могли влиять на хранилище redux через реквизиты вашего компонента. mapStateToProps аналогичен — он позволяет вам извлекать элементы из вашего хранилища redux и назначать их реквизитам вашего компонента. В вашем примере теперь вы могли бы получить доступ this.props.addComment к своему обернутому компоненту в качестве поддержки. Это то, как вы подключаете свои компоненты к хранилищу redux и как вы можете отправлять и получать данные в хранилище.

Обратите внимание, что это всего лишь соглашения об именовании. На самом деле вы можете называть эти функции как угодно, но большинство людей используют mapStateToProps и mapDispatchToProps , поскольку это довольно подробно описывает происходящее. Вы можете присвоить им имена puppy и booya всем заботам redux, при условии, что вы передаете их connect должным образом.

Обязательно прочитайте документы. Хотя, честно говоря, когда я изучал это, кто-то должен был на самом деле объяснить это и мне, но документы — отличный ресурс.