react-redux
. Le proporciona una forma de pasar el state
Redux y dispatch
a sus componentes React como props
. 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á react-redux
para conectar la tienda Redux con su componente, extrayendo así el estado local a la tienda Redux. DisplayMessages
. Agregue un constructor a este componente e inicialícelo con un estado que tenga dos propiedades: input
, que se establece en una cadena vacía, y messages
, que se establece en una matriz vacía. DisplayMessages
debe representar un elemento div
vacío.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The DisplayMessages
component should render an empty div
element.");'
- text: 'El constructor de DisplayMessages
debe llamarse correctamente con super
, pasando en props
.'
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The DisplayMessages
constructor should be called properly with super
, passing in props
.");'
- text: 'El componente DisplayMessages
debe tener un estado inicial igual a {input: "", messages: []}
.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === "object" && initialState.input === "" && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), "The DisplayMessages
component should have an initial state equal to {input: "", messages: []}
.");'
```