3.9 KiB
3.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036146 | Map Dispatch to Props | 6 | false | Despacho do Mapa para Adereços |
Description
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
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