freeCodeCamp

3.9 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036146	Map Dispatch to Props	6	false		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

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

3.9 KiB Raw Blame History