freeCodeCamp/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-dispatch-to-props.russian.md

id, title, challengeType, isRequired, forumTopicId, localeTitle

id	title	challengeType	isRequired	forumTopicId	localeTitle
5a24c314108439a4d4036146	Map Dispatch to Props	6	false	301432	Отправка карты на реквизит

Description

Функция mapDispatchToProps() используется для предоставления конкретным создателям действий вашим компонентам React, чтобы они могли отправлять действия против магазина Redux. Он похож по структуре на mapStateToProps() вы написали в последнем вызове. Он возвращает объект, который сопоставляет действия отправки с именами свойств, которые становятся компонентами props . Однако вместо возврата части state каждое свойство возвращает функцию, которая вызывает dispatch с создателем действия и любыми соответствующими действительными данными. У вас есть доступ к этой dispatch потому что она передается в mapDispatchToProps() в качестве параметра, когда вы определяете функцию, точно так же, как вы передали state mapStateToProps() . За кулисами React Redux использует store.dispatch() Redux для store.dispatch() этих рассылок с помощью mapDispatchToProps() . Это похоже на то, как он использует store.subscribe() для компонентов, которые отображаются в state . Например, у вас есть создатель действия loginUser() который принимает username в качестве полезной нагрузки. Объект, возвращенный из mapDispatchToProps() для этого создателя действия, будет выглядеть примерно так:

{
submitLoginUser: function (username) {
отправка (loginUser (имя пользователя));
}
}

Instructions

Редактор кода предоставляет создателя действия, называемого addMessage() . Напишите функцию mapDispatchToProps() которая принимает dispatch в качестве аргумента, а затем возвращает объект. Объект должен иметь свойство submitNewMessage установленное для функции отправки, которое принимает параметр для добавления нового сообщения при отправке addMessage() .

Tests

tests:
  - text: <code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.
    testString: assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty('type') && addMessageTest.hasOwnProperty('message')); })());
  - text: <code>mapDispatchToProps</code> should be a function.
    testString: assert(typeof mapDispatchToProps === 'function');
  - text: <code>mapDispatchToProps</code> should return an object.
    testString: assert(typeof mapDispatchToProps() === 'object');
  - text: Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.
    testString: assert((function() { let testAction; const dispatch = (fn) => { testAction = fn; }; let dispatchFn = mapDispatchToProps(dispatch); dispatchFn.submitNewMessage('__TEST__MESSAGE__'); return (testAction.type === 'ADD' && testAction.message === '__TEST__MESSAGE__'); })());

Challenge Seed

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

// change code below this line

Solution

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

// change code below this line

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: function(message) {
      dispatch(addMessage(message));
    }
  }
};