<sectionid="description"> ¡Ya casi terminas! Recuerde que escribió todo el código de Redux para que Redux pudiera controlar la administración del estado de su aplicación de mensajes React. Ahora que Redux está conectado, debe extraer la administración del estado del componente de <code>Presentational</code> y en Redux. Actualmente, tiene Redux conectado, pero está manejando el estado localmente dentro del componente de <code>Presentational</code> . </section>
<sectionid="instructions"> En el componente <code>Presentational</code> , primero, elimine la propiedad de <code>messages</code> en el <code>state</code> local. Estos mensajes serán gestionados por Redux. A continuación, modifique el método <code>submitMessage()</code> para que <code>submitNewMessage()</code> desde <code>this.props</code> , y pase la entrada del mensaje actual del <code>state</code> local como un argumento. Como también eliminó los <code>messages</code> del estado local, elimine la propiedad de <code>messages</code> de la llamada a <code>this.setState()</code> aquí. Finalmente, modifique el método <code>render()</code> para que se asigne sobre los mensajes recibidos de los <code>props</code> lugar del <code>state</code> . Una vez que se realicen estos cambios, la aplicación continuará funcionando de la misma manera, excepto que Redux administra el estado. Este ejemplo también ilustra cómo un componente puede tener un <code>state</code> local: su componente aún realiza un seguimiento local de las entradas del usuario en su propio <code>state</code> . Puede ver cómo Redux proporciona un marco de administración de estado útil sobre React. Obtuvo el mismo resultado utilizando solo el estado local de React al principio, y esto generalmente es posible con aplicaciones simples. Sin embargo, a medida que sus aplicaciones se vuelven más grandes y complejas, también lo hace la administración de su estado, y este es el problema que Redux resuelve. </section>
- text: El <code>AppWrapper</code> debe renderizar a la página.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The <code>AppWrapper</code> should render to the page.");'
- text: 'El componente de <code>Presentational</code> debe representar los elementos <code>h2</code> , <code>input</code> , <code>button</code> y <code>ul</code> .'
- text: 'El componente de <code>Presentational</code> debe representar los elementos <code>h2</code> , <code>input</code> , <code>button</code> y <code>ul</code> .'
- text: El componente de <code>Presentational</code> debe recibir <code>messages</code> de la tienda de Redux como prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), "The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.");'
- text: El componente de <code>Presentational</code> debe recibir el creador de la acción <code>submitMessage</code> como prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.");'
- text: 'El estado del componente <code>Presentational</code> debe contener una propiedad, <code>input</code> , que se inicializa en una cadena vacía.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalState = mockedComponent.find("Presentational").instance().state; return typeof PresentationalState.input === "string" && Object.keys(PresentationalState).length === 1; })(), "The state of the <code>Presentational</code> component should contain one property, <code>input</code>, which is initialized to an empty string.");'
- text: Escribir en el elemento de <code>input</code> debe actualizar el estado del componente de <code>Presentational</code> .
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const testValue = "__MOCK__INPUT__"; const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); let initialInput = mockedComponent.find("Presentational").find("input"); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); const updatedInput = updated.find("Presentational").find("input"); assert(initialInput.props().value === "" && updatedInput.props().value === "__MOCK__INPUT__", "Typing in the <code>input</code> element should update the state of the <code>Presentational</code> component."); }; '
- text: El envío del <code>submitMessage</code> en el componente de <code>Presentational</code> debe actualizar el almacén de Redux y borrar la entrada en el estado local.