---
id: 5a24c314108439a4d4036146
title: Map Dispatch to Props
challengeType: 6
isRequired: false
videoUrl: ''
localeTitle: Mapa de Despacho a Puntales
---
## Description
La función mapDispatchToProps() se usa para proporcionar creadores de acción específicos a sus componentes React para que puedan enviar acciones contra el almacén de Redux. Es similar en estructura a la función mapStateToProps() que escribió en el último desafío. Devuelve un objeto que asigna acciones de despacho a nombres de propiedades, que se convierten en props componentes. Sin embargo, en lugar de devolver una parte del state , cada propiedad devuelve una función que llama el dispatch con un creador de acción y cualquier información de acción relevante. Tiene acceso a este dispatch porque se pasa a mapDispatchToProps() como un parámetro cuando define la función, al igual que pasó el state a mapStateToProps() . Detrás de escena, React Redux está utilizando store.dispatch() Redux para realizar estos despachos con mapDispatchToProps() . Esto es similar a cómo utiliza store.subscribe() para los componentes que se asignan al state . Por ejemplo, tiene un creador de acción loginUser() que toma un username como una carga útil de acción. El objeto devuelto desde mapDispatchToProps() para este creador de acción se vería así: {
submitLoginUser: function (nombre de usuario) {
dispatch (loginUser (nombre de usuario));
}
}
## Instructions
El editor de código proporciona un creador de acción llamado addMessage() . Escriba la función mapDispatchToProps() que toma el dispatch como un argumento, luego devuelve un objeto. El objeto debe tener una propiedad submitNewMessage establecida en la función de envío, que toma un parámetro para que el nuevo mensaje se agregue cuando distribuya addMessage() .
## Tests
```yml
tests:
- text: addMessage debe devolver un objeto con claves de type y message .
testString: 'assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty("type") && addMessageTest.hasOwnProperty("message")); })(), "addMessage should return an object with keys type and message.");'
- text: mapDispatchToProps debería ser una función.
testString: 'assert(typeof mapDispatchToProps === "function", "mapDispatchToProps should be a function.");'
- text: mapDispatchToProps debe devolver un objeto.
testString: 'assert(typeof mapDispatchToProps() === "object", "mapDispatchToProps should return an object.");'
- text: El envío de addMessage con submitNewMessage desde mapDispatchToProps debe devolver un mensaje a la función de envío.
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 addMessage with submitNewMessage from mapDispatchToProps should return a message to the dispatch function.");'
```
## Challenge Seed
```jsx
const addMessage = (message) => {
return {
type: 'ADD',
message: message
}
};
// change code below this line
```
## Solution
```js
// solution required
```