freeCodeCamp

3.9 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036146	Map Dispatch to Props	6	false		Despacho do Mapa para Adereços

Description

A função mapDispatchToProps() é usada para fornecer criadores de ações específicas para seus componentes React para que eles possam despachar ações contra o armazenamento Redux. É semelhante em estrutura à função mapStateToProps() você escreveu no último desafio. Ele retorna um objeto que mapeia ações de despacho para nomes de propriedades, que se tornam props componentes. No entanto, em vez de retornar um pedaço de state , cada propriedade retorna uma função que chama dispatch com um criador de ações e quaisquer dados de ação relevantes. Você tem acesso a este dispatch porque é passado para mapDispatchToProps() como um parâmetro quando você define a função, assim como você passou de state para mapStateToProps() . Nos bastidores, o React Redux está usando o store.dispatch() do Redux para conduzir esses despachos com mapDispatchToProps() . Isso é semelhante a como ele usa store.subscribe() para componentes que são mapeados para o state . Por exemplo, você tem um criador de ações loginUser() que usa um username como uma carga útil de ação. O objeto retornado de mapDispatchToProps() para este criador de ações seria algo como:

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

Instructions

O editor de código fornece um criador de ações chamado addMessage() . Escreva a função mapDispatchToProps() que usa dispatch como argumento e retorna um objeto. O objeto deve ter uma propriedade submitNewMessage configurada para a função dispatch, que recebe um parâmetro para a nova mensagem adicionar quando envia addMessage() .

Tests

tests:
  - text: <code>addMessage</code> deve retornar um objeto com <code>type</code> e <code>message</code> chaves.
    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> deve ser uma função.
    testString: 'assert(typeof mapDispatchToProps === "function", "<code>mapDispatchToProps</code> should be a function.");'
  - text: <code>mapDispatchToProps</code> deve retornar um objeto.
    testString: 'assert(typeof mapDispatchToProps() === "object", "<code>mapDispatchToProps</code> should return an object.");'
  - text: Despachar <code>addMessage</code> com <code>submitNewMessage</code> de <code>mapDispatchToProps</code> deve retornar uma mensagem para a função de dispatch.
    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

3.9 KiB Raw Blame History