freeCodeCamp

5.0 KiB

Raw Blame History

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

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> должен возвращать объект с <code>type</code> ключа и <code>message</code> .
    testString: 'assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty("type") && addMessageTest.hasOwnProperty("message")); })(), "<code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.");'
  - text: <code>mapDispatchToProps</code> должна быть функцией.
    testString: 'assert(typeof mapDispatchToProps === "function", "<code>mapDispatchToProps</code> should be a function.");'
  - text: <code>mapDispatchToProps</code> должен возвращать объект.
    testString: 'assert(typeof mapDispatchToProps() === "object", "<code>mapDispatchToProps</code> should return an object.");'
  - text: Отправка <code>addMessage</code> с <code>submitNewMessage</code> из <code>mapDispatchToProps</code> должна вернуть сообщение функции отправки.
    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__"); })(), "Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.");'

Challenge Seed

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

// change code below this line

Solution

// solution required

5.0 KiB Raw Blame History Unescape Escape