<sectionid="description"> Esta serie de desafíos presenta cómo utilizar Redux con React. Primero, aquí hay una revisión de algunos de los principios clave de cada tecnología. React es una biblioteca de vistas que proporciona datos, luego la convierte de forma eficiente y predecible. Redux es un marco de administración de estado que puede utilizar para simplificar la administración del estado de su aplicación. Normalmente, en una aplicación React Redux, creas una sola tienda Redux que administra el estado de toda tu aplicación. Sus componentes de React se suscriben solo a los datos en la tienda que son relevantes para su función. Luego, envía acciones directamente desde los componentes de React, que luego activan las actualizaciones del almacén. Aunque los componentes de React pueden administrar su propio estado localmente, cuando tiene una aplicación compleja, generalmente es mejor mantener el estado de la aplicación en una sola ubicación con Redux. Hay excepciones cuando los componentes individuales pueden tener un estado local específico solo para ellos. Finalmente, debido a que Redux no está diseñado para funcionar con React out of the box, debe usar el paquete <code>react-redux</code> . Le proporciona una forma de pasar el <code>state</code> Redux y <code>dispatch</code> a sus componentes React como <code>props</code> . En los próximos desafíos, primero, creará un componente React simple que le permite ingresar nuevos mensajes de texto. Estos se agregan a una matriz que se muestra en la vista. Esto debería ser una buena revisión de lo que aprendiste en las lecciones de React. A continuación, creará un almacén de Redux y acciones que administran el estado de la matriz de mensajes. Finalmente, utilizará <code>react-redux</code> para conectar la tienda Redux con su componente, extrayendo así el estado local a la tienda Redux. </section>
<sectionid="instructions"> Comience con un componente <code>DisplayMessages</code> . Agregue un constructor a este componente e inicialícelo con un estado que tenga dos propiedades: <code>input</code> , que se establece en una cadena vacía, y <code>messages</code> , que se establece en una matriz vacía. </section>
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.");'