4.3 KiB
4.3 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036141 | Getting Started with React Redux | 6 | false | Empezando con React Redux |
Description
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. Instructions
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. Tests
tests:
- text: El componente <code>DisplayMessages</code> debe representar un elemento <code>div</code> vacío.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The <code>DisplayMessages</code> component should render an empty <code>div</code> element.");'
- text: 'El constructor de <code>DisplayMessages</code> debe llamarse correctamente con <code>super</code> , pasando en <code>props</code> .'
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>.");'
- text: 'El componente <code>DisplayMessages</code> debe tener un estado inicial igual a <code>{input: "", messages: []}</code> .'
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 <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.");'
Challenge Seed
class DisplayMessages extends React.Component {
// change code below this line
// change code above this line
render() {
return <div />
}
};
After Test
console.info('after the test');
Solution
// solution required