2.8 KiB
2.8 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036145 | Map State to Props | 6 | false | Mapa del estado a los apoyos |
Descripción
Provider
permite proporcionar state
y dispatch
a sus componentes React, pero debe especificar exactamente qué estado y acciones desea. De esta manera, se asegura de que cada componente solo tenga acceso al estado que necesita. Esto se logra creando dos funciones: mapStateToProps()
y mapDispatchToProps()
. En estas funciones, declara a qué estados de estado desea acceder y a qué creadores de acción necesita poder enviar. Una vez que estas funciones estén en su lugar, verá cómo utilizar el método React Redux connect
para conectarlos a sus componentes en otro desafío. Nota: Detrás de escena, React Redux usa el método store.subscribe()
para implementar mapStateToProps()
. Instrucciones
mapStateToProps()
. Esta función debe tomar el state
como un argumento, luego devolver un objeto que mapea ese estado a nombres de propiedad específicos. Estas propiedades serán accesibles a su componente a través de props
. Como este ejemplo mantiene todo el estado de la aplicación en una sola matriz, puede pasar ese estado completo a su componente. Cree un messages
propiedad en el objeto que se está devolviendo y configúrelo en state
. Pruebas
tests:
- text: El <code>state</code> constante debe ser una matriz vacía.
testString: 'assert(Array.isArray(state) && state.length === 0, "The const <code>state</code> should be an empty array.");'
- text: <code>mapStateToProps</code> debería ser una función.
testString: 'assert(typeof mapStateToProps === "function", "<code>mapStateToProps</code> should be a function.");'
- text: <code>mapStateToProps</code> debe devolver un objeto.
testString: 'assert(typeof mapStateToProps() === "object", "<code>mapStateToProps</code> should return an object.");'
- text: Pasar una matriz como estado a <code>mapStateToProps</code> debería devolver esta matriz asignada a una clave de <code>messages</code> .
testString: 'assert(mapStateToProps(["messages"]).messages.pop() === "messages", "Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.");'
Challenge Seed
const state = [];
// cambia el código debajo esta linea
Solución
// Solución requerida