70 lines
2.1 KiB
Markdown
70 lines
2.1 KiB
Markdown
---
|
|
id: 5a24c314108439a4d4036145
|
|
title: Asigna el estado a props
|
|
challengeType: 6
|
|
forumTopicId: 301433
|
|
dashedName: map-state-to-props
|
|
---
|
|
|
|
# --description--
|
|
|
|
El componente `Provider` te permite proporcionar `state` y `dispatch` a tus componentes React, pero debes especificar exactamente qué estado y acciones quieres. De esta manera, te aseguras de que cada componente sólo tiene acceso al estado que necesita. Esto se consigue creando dos funciones: `mapStateToProps()` y `mapDispatchToProps()`.
|
|
|
|
En estas funciones, declaras a qué partes del estado quieres tener acceso y qué creadores de acción necesitas poder enviar. Una vez que estas funciones están en su lugar, verás cómo usar el método React Redux `connect` para conectarlos a tus componentes en otro desafío.
|
|
|
|
**Nota:** Tras bambalinas, React Redux utiliza el método `store.subscribe()` para implementar `mapStateToProps()`.
|
|
|
|
# --instructions--
|
|
|
|
Crea una función `mapStateToProps()`. Esta función debe tomar `state` como argumento, y luego devolver un objeto que asigna ese estado a nombres de propiedades específicas. Estas propiedades serán accesibles a tu componente a través de `props`. Dado que este ejemplo mantiene todo el estado de la aplicación en un solo arreglo, puedes pasar todo ese estado a tu componente. Crea una propiedad `messages` en el objeto que se devuelve, y establécela como `state`.
|
|
|
|
# --hints--
|
|
|
|
La const `state` debe ser un arreglo vacío.
|
|
|
|
```js
|
|
assert(Array.isArray(state) && state.length === 0);
|
|
```
|
|
|
|
`mapStateToProps` debe ser una función.
|
|
|
|
```js
|
|
assert(typeof mapStateToProps === 'function');
|
|
```
|
|
|
|
`mapStateToProps` debe devolver un objeto.
|
|
|
|
```js
|
|
assert(typeof mapStateToProps() === 'object');
|
|
```
|
|
|
|
Pasar un arreglo como estado a `mapStateToProps` debe devolver este arreglo asignado a una clave de `messages`.
|
|
|
|
```js
|
|
assert(mapStateToProps(['messages']).messages.pop() === 'messages');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```jsx
|
|
const state = [];
|
|
|
|
// Change code below this line
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```jsx
|
|
const state = [];
|
|
|
|
// Change code below this line
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
messages: state
|
|
}
|
|
};
|
|
```
|