Что такое mapDispatchToProps?

Question

Что такое mapDispatchToProps?

142

Я читал документацию для библиотеки Redux и имел этот пример,

В дополнение к чтению состояния компоненты контейнера могут отправлять действия. Аналогичным образом вы можете определить функцию с именем mapDispatchToProps(), которая получает метод dispatch() и возвращает реквизиты обратного вызова, которые вы хотите ввести в презентационный компонент.

Это фактически не имеет смысла. Зачем вам mapDispatchToProps, когда у вас уже есть mapStateToProps?

Они также предоставляют этот удобный пример кода:

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

Может кто-нибудь объяснить в простых мирянах, что это за функция и почему она полезна?

Code Whisperer 09 сен. 2016, в 21:51

Источник

Теги:

reactjs

redux

5 ответов

22

Это в основном стенография. Поэтому вместо того, чтобы писать:

this.props.dispatch(toggleTodo(id));

Вы должны использовать mapDispatchToProps, как показано в вашем примере кода, а затем в другом месте:

this.props.onTodoClick(id);

или, более вероятно, в этом случае вы должны иметь это как обработчик события:

<MyComponent onClick={this.props.onTodoClick} />

Здесь полезное видео Дэн Абрамов: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

hamstu 09 сен. 2016, в 21:06

0

Спасибо. Мне также интересно, как диспетчеризация добавляется в реквизит?
Code Whisperer 10 сен. 2016, в 00:29
10

Если вы не предоставите свою собственную функцию mapDispatch , Redux будет использовать значение по умолчанию. Эта функция mapDispatch умолчанию просто берет ссылку на функцию dispatch и выдает ее как this.props.dispatch .
markerikson 10 сен. 2016, в 02:38
7

Метод отправки передается Компонентом Провайдера
Diego Haz 10 сен. 2016, в 05:49

Показать ещё 1 комментарий

16

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

Saisurya Kattamuri 03 март 2017, в 07:50

2

mapStateToProps, mapDispatchToProps и подключение из библиотеки react-redux обеспечивает удобный способ доступа к вашему состоянию и функции отправки вашего магазина. Таким образом, в основном соединение - это компонент более высокого порядка, вы также можете использовать его как обертку, если это имеет смысл для вас. Таким образом, каждый раз, когда ваше состояние изменяется, mapStateToProps вызывается с вашим новым состоянием, а затем, когда вы создаете компонент обновления, вы запускаете функцию рендеринга для рендеринга вашего компонента в браузере. mapDispatchToProps также сохраняет ключевые значения в реквизитах вашего компонента, обычно они принимают форму функции. Таким образом вы можете вызвать изменение состояния из вашего компонента onClick, onChange events.

Из документов:

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

const TodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

Также убедитесь, что вы знакомы с Реагировать функции безстоящих лиц и Высшее -Закрыть компоненты

Vlad Filimon 10 сен. 2016, в 07:43

0

Таким образом, отправка, как событие в принципе?
Code Whisperer 10 сен. 2016, в 13:48
2

Это может быть связано с событием, отправка только функция и единственный способ изменить состояние приложения. mapStateToProps - это один из способов представить функцию отправки вашего магазина в React Component. Также обратите внимание, что connect не является частью redux, на самом деле это всего лишь утилита, и шаблонная библиотека под названием response-redux сокращает работу для реагирования и redux. Вы можете достичь того же результата без реакции-избыточности, если передадите свой магазин от корневого компонента реакции дочерним элементам.
Vlad Filimon 10 сен. 2016, в 16:45

0

mstp получает state и props и позволяет извлекать реквизиты из состояния для перехода к компоненту.

mdtp получает dispatch и props и предназначен для того, чтобы вы могли привязать создателей действий к отправке, поэтому, когда вы выполняете результирующую функцию, действие будет удалено.

Я нахожу, что это только избавляет вас от необходимости выполнять dispatch(actionCreator()) внутри вашего компонента, что делает его более легким для чтения.

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments

Harry Moreno 09 сен. 2016, в 21:27

0

Спасибо, но какова ценность метода dispatch ? Откуда это взялось?
Code Whisperer 10 сен. 2016, в 00:28
0

ой. Диспетчеризация в основном заставляет действие запускать однонаправленный поток притока / потока. Другие ответы, кажется, ответили на ваш вопрос лучше, чем этот.
Harry Moreno 12 сен. 2016, в 03:41
0

Кроме того, метод отправки основан на расширении, предоставляемом самим <Provider/> . Он выполняет свою собственную магию компонентов высокого порядка, чтобы гарантировать, что отправление доступно в его дочерних компонентах.
Ricardo Magalhães 17 апр. 2017, в 08:43

Показать ещё 1 комментарий

Ещё вопросы

Спасибо. Мне также интересно, как диспетчеризация добавляется в реквизит?
Если вы не предоставите свою собственную функцию mapDispatch , Redux будет использовать значение по умолчанию. Эта функция mapDispatch умолчанию просто берет ссылку на функцию dispatch и выдает ее как this.props.dispatch .
Метод отправки передается Компонентом Провайдера
Таким образом, отправка, как событие в принципе?
Это может быть связано с событием, отправка только функция и единственный способ изменить состояние приложения. mapStateToProps - это один из способов представить функцию отправки вашего магазина в React Component. Также обратите внимание, что connect не является частью redux, на самом деле это всего лишь утилита, и шаблонная библиотека под названием response-redux сокращает работу для реагирования и redux. Вы можете достичь того же результата без реакции-избыточности, если передадите свой магазин от корневого компонента реакции дочерним элементам.
Спасибо, но какова ценность метода dispatch ? Откуда это взялось?
ой. Диспетчеризация в основном заставляет действие запускать однонаправленный поток притока / потока. Другие ответы, кажется, ответили на ваш вопрос лучше, чем этот.
Кроме того, метод отправки основан на расширении, предоставляемом самим <Provider/> . Он выполняет свою собственную магию компонентов высокого порядка, чтобы гарантировать, что отправление доступно в его дочерних компонентах.

GreenAsJade · Accepted Answer · 2016-10-16T09-13-00.000Z

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

На это можно ответить только в контексте шаблона container-component, который я нашел лучше всего понятым в первом чтении:

https://medium.com/@learnreact/container-components-c0e67432e005#.1a9j3w1jl

затем

http://redux.js.org/docs/basics/UsageWithReact.html

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

Отделяется от этого беспокойство:

как вы можете отобразить материал,
и как вы обрабатываете события.

Это то, что containers для.

Следовательно, "хорошо спроектированный" component в шаблоне выглядит следующим образом:

class FancyAlerter extends Component {
    sendAlert = () => {
        this.props.sendTheAlert()
    }

    render() {
        <div>
          <h1>Today Fancy Alert is {this.props.fancyInfo}</h1>
          <Button onClick={sendAlert}/>
        </div>
     }}

Посмотрите, как этот компонент получает информацию, которую он отображает из реквизита (который поступает из магазина redux через mapStateToProps), и он также получает свою функцию действия из своих реквизитов: sendTheAlert().

Что там, где mapDispatchToProps входит: в соответствующем container

FancyButtonContainer.js

function mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })
}

function mapStateToProps(state} {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}

export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter
)

Интересно, видите ли вы, теперь это container [1], который знает о редукции и отправке и хранении, состоянии и... материалах.

component в шаблоне FancyAlerter, которому рендеринг не нужен никому из этого материала: он получает свой метод для вызова в onClick кнопки через свои реквизиты.

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

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

(Примечание: вы не можете использовать mapStateToProps для той же цели, что и mapDispatchToProps по той причине, что у вас нет доступа к dispatch внутри mapStateToProp. Таким образом, вы не можете использовать mapStateToProps, чтобы предоставить обернутому компоненту метод, который использует dispatch.

Я не знаю, почему они решили разбить его на две функции отображения - возможно, было бы более уместно иметь mapToProps(state, dispatch, props) IE одну функцию для выполнения обоих!

[1] Обратите внимание, что я намеренно явно назвал контейнер FancyButtonContainer, чтобы подчеркнуть, что это "вещь" - идентичность (и, следовательно, существование!) контейнера как "вещи" иногда теряется в сокращении

export default connect(...)

который показан в большинстве примеров

Я все еще хотел бы знать: что относительно требуемой функциональности не может быть обработано прямым вызовом store.dispatch из компонента?
@ user2130130 Нет. Это о хорошем дизайне. Если вы связали свой компонент с store.dispatch, то, когда вы решите выделить избыточный код или захотите использовать его в каком-либо месте, не основанном на Redxu (или в другом, о чем я не могу думать сейчас), вы застряли с много изменений. Ваш вопрос в целом звучит так: «Почему мы беспокоимся о« хороших методах проектирования »- вы получаете такую же функциональность, как только вы ее кодируете». Предоставляется mapDispatchToProps, так что вы можете писать хорошо спроектированные, четко отделенные компоненты.
Что я действительно не понимаю, так это то, что: ALERT_ACTION - это функция действия или type который возвращается из функции действия? : / так сбит с толку
@JamieHutber Строго говоря, ALERT_ACTION не имеет ничего общего с этим вопросом. Это допустимый аргумент для отправки, и, как это происходит, в моем коде он исходит от «компоновщика действий», который возвращает объект, который использует диспетчеризация, как описано redux.js.org/docs/api/Store.html#dispatch , Основной момент здесь заключается в том, что способ вызова диспетчеризации описан в контейнере и передается на реквизиты компонентов. Компонент получает функции только от своих реквизитов, нигде больше. «Неправильный» способ сделать это в этом шаблоне - передать диспетчеру компонент и выполнить тот же вызов в компоненте.
Если у вас есть несколько создателей действий, которые нужно передать дочернему компоненту в качестве реквизита, одна альтернатива - заключить их в bindActionCreators внутри mapDispatchToProps (см. Redux.js.org/docs/api/bindActionCreators.html ); другая альтернатива - просто предоставить объект создателей действий для connect (), например connect (mapStateToProps, {actioncreators}), response-redux обернет их dispatch () для вас.
Спасибо за это объяснение. Я просто просматривал что-то, где у меня был один компонент, который был контейнером, и у него был доступ к отправке через this.props без необходимости подключения, однако другой компонент не был таким же, и мне нужно было использовать mapStateToProps, кто-нибудь может объяснить, почему это дело?
Спасибо за это объяснение, хотя пара вопросов: 1) If you coupled your component to store.dispatch, then when you decide to factor out redux, or want to use it some place that isn't redxu based [...] you are stuck with a lot of changes => как бы проще было сделать рефакторинг из-за редукции из контейнера, чем из-за рефакторинга из компонента, он все равно просто меняет действия на какую-то другую парадигму в любом случае, верно? 2) На каком уровне должны существовать эти контейнеры? Один контейнер для каждого компонента? Ваш пример вроде указывает на это, может быть, это просто упрощение? Спасибо большое.
@ 1252748 Я согласен с тем, что аргумент в пользу сохранения компонентов в чистоте при отправке «в случае замены редукса» несколько искусственен из-за огромного количества замен редукса, если вы хотите это сделать. Тем не менее, это действительно более наглядный пример «поддержания компонентов в чистоте» - компоненты, которые чистым образом получают свое состояние из контейнера, которые, очевидно, обеспечивают его, действительно являются полезным чистым шаблоном.
@ 1252748 Я думаю, что призыв «на каком уровне они должны существовать» - это тот, который требует навыков и опыта - это действительно вопрос дизайна, который неочевиден. По моему опыту, я использовал слишком мало контейнеров и пожалел об этом позже. На первый взгляд кажется многословным наличие контейнера для каждого компонента, но его преимущество заключается в простоте и понятности. В настоящее время я направляюсь в этом направлении, но не претендую на звание эксперта по этому вопросу.
Можно ли разрешить метод sendTheAlert вызываемый внутри FancyAlerter ? Как я хочу вызвать какое-то действие, как только sendTheAlert решен. Я попытался сделать это с помощью this.props.sendTheAlert().then(() => { Action.go }) Но вот then это решается до отправки.
+1 за то, почему они выбрали две функции отображения вместо одной. Единственное, о чем я могу подумать, это то, что одна объединенная функция отображения позволит вам «каррировать» функции с некоторыми существующими состояниями, которые по какой-то причине могут быть запахом кода или анти-паттерном, поскольку, возможно, компонент должен отвечать за выбор требуемое состояние для упакованных вызовов диспетчеризации ... может быть?
отличное объяснение! не могли бы вы сказать мне, как иметь более 1 mapDispatchToProps в контейнере? скажем, мой компонент должен sendTheAlert когда нажата processAnotherThing yes, и processAnotherThing когда нажата processAnotherThing no?
@Zennichimaro Это звучит как хороший вопрос переполнения стека. Если вы спросите это, и ссылку здесь в этих комментариях, я постараюсь взглянуть.
@GreenAsJade Я попробовал и после различных проб и ошибок и почти сдался, я вернулся в SO и задал этот вопрос, лол .. спасибо потрясающему сообществу, я нашел несколько способов сейчас :) stackoverflow.com/questions/47361754 / ...
Я думаю, что FancyButtonContainer.js должен быть изменен на «экспортировать const FancyButtonContainer = connect (mapStateToProps, mapDispatchToProps) (FancyButtonContainer // не FancyAlerter)»
@NomuraNori FancyAlerter - это компонент, который оборачивается соединением для создания FancyButtonContainer.