4.2 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036146	Перетворіть дані Dispatch в Props	6	301432	map-dispatch-to-props

--description--

Функція mapDispatchToProps() використовується для забезпечення певних авторів дій для ваших компонентів React, щоб вони могли відправляти дії за рахунок сховища Redux. Вона схожа по структурі на функцію mapStateToProps(), яку ви написали в останньому завданні. Вона повертає об'єкт, який зіставляє дії відправлення з назвами параметрів, які стають компонентами props. Тим не менш, замість того, щоб повертати частину state, кожен параметр повертає функцію, що викликає dispatch з творцем дії та будь-якими відповідними данними дії. Ви маєте доступ до dispatch, тому що він передається в mapDispatchToProps() як параметр, коли ви визначаєте функцію, так само, як ви пройшли від state до mapStateToProps(). По секрету, React Redux використовує Redux store.dispatch() для проведення цих відправлень за допомогою mapDispatchToProps(). Це схоже на те, як він використовує store.subscribe() для компонентів, зіставлених на state.

Наприклад, у вас є творець дій loginUser(), який приймає username, як корисну дію. Об'єкт, повернений з mapDispatchToProps() для цього творця дій виглядатиме приблизно так:

{
  submitLoginUser: function(username) {
    dispatch(loginUser(username));
  }
}

--instructions--

Редактор коду надає творця дії, який називається addMessage(). Запишіть функцію mapDispatchToProps(), яка приймає dispatch як аргумент, а потім повертає об'єкт. Об'єкт повинен мати встановлену власність submitNewMessage на функцію відправлення, яка приймає параметр додавання для нового повідомлення, щоб надіслати addMessage().

--hints--

addMessage повинен повертати об'єкт за допомогою ключів type та message.

assert(
  (function () {
    const addMessageTest = addMessage();
    return (
      addMessageTest.hasOwnProperty('type') &&
      addMessageTest.hasOwnProperty('message')
    );
  })()
);

mapDispatchToProps повинна бути функцією.

assert(typeof mapDispatchToProps === 'function');

mapDispatchToProps повинен повертати об'єкт.

assert(typeof mapDispatchToProps() === 'object');

Надсилання addMessage разом з submitNewMessage від mapDispatchToProps повинне повернути повідомлення до функції відправлення.

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__'
    );
  })()
);

--seed--

--seed-contents--

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

// Change code below this line

--solutions--

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

// Change code below this line

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

4.2 KiB Raw Blame History Unescape Escape