3.9 KiB
3.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036146 | Map Dispatch to Props | 6 | false | Mapa de Despacho a Puntales |
Description
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
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
tests:
- text: <code>addMessage</code> debe devolver un objeto con claves de <code>type</code> y <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> debería ser una función.
testString: 'assert(typeof mapDispatchToProps === "function", "<code>mapDispatchToProps</code> should be a function.");'
- text: <code>mapDispatchToProps</code> debe devolver un objeto.
testString: 'assert(typeof mapDispatchToProps() === "object", "<code>mapDispatchToProps</code> should return an object.");'
- text: El envío de <code>addMessage</code> con <code>submitNewMessage</code> desde <code>mapDispatchToProps</code> 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 <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