3.9 KiB
3.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036147 | Connect Redux to React | 6 | false | Conecta Redux a Reaccionar |
Descripción
mapStateToProps()
y mapDispatchToProps()
, puede usarlas para mapear el state
y dispatch
a los props
de uno de sus componentes React. El método de connect
de React Redux puede manejar esta tarea. Este método toma dos argumentos opcionales, mapStateToProps()
y mapDispatchToProps()
. Son opcionales porque puede tener un componente que solo necesita acceso al state
pero no necesita enviar ninguna acción, o viceversa. Para usar este método, pase las funciones como argumentos e inmediatamente llame al resultado con su componente. Esta sintaxis es un poco inusual y se parece a: connect(mapStateToProps, mapDispatchToProps)(MyComponent)
Nota: Si desea omitir uno de los argumentos del método de connect
, pase null
en su lugar. Instrucciones
mapStateToProps()
y mapDispatchToProps()
y un nuevo componente React llamado Presentational
. Conecte este componente para Redux con la connect
método de la ReactRedux
objeto global, y lo llaman inmediatamente en el Presentational
componente. Asigne el resultado a una nueva const
llamada ConnectedComponent
que representa el componente conectado. Eso es todo, ahora estás conectado a Redux! Intente cambiar cualquiera de los argumentos de connect
a null
y observe los resultados de la prueba. Pruebas
tests:
- text: El componente de <code>Presentational</code> debe hacer.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render.");'
- text: El componente de <code>Presentational</code> debe recibir <code>messages</code> prop <code>messages</code> través de <code>connect</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.");'
- text: El componente de <code>Presentational</code> debe recibir un prop <code>submitNewMessage</code> través de <code>connect</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.");'
Challenge Seed
const addMessage = (message) => {
return {
type: 'ADD',
message: message
}
};
const mapStateToProps = (state) => {
return {
messages: state
}
};
const mapDispatchToProps = (dispatch) => {
return {
submitNewMessage: (message) => {
dispatch(addMessage(message));
}
}
};
class Presentational extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h3>This is a Presentational Component</h3>
}
};
const connect = ReactRedux.connect;
// change code below this line
After Test
console.info('after the test');
Solución
// Solución requerida