3.9 KiB
3.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036147 | Connect Redux to React | 6 | false | Conecte o Redux para Reagir |
Description
mapStateToProps()
as mapStateToProps()
e mapDispatchToProps()
, é possível usá-las para mapear state
e dispatch
para os props
de um de seus componentes React. O método de connect
do React Redux pode manipular essa tarefa. Esse método usa dois argumentos opcionais, mapStateToProps()
e mapDispatchToProps()
. Eles são opcionais porque você pode ter um componente que precisa apenas acessar o state
mas não precisa despachar nenhuma ação, ou vice-versa. Para usar esse método, passe as funções como argumentos e chame imediatamente o resultado com seu componente. Esta sintaxe é um pouco incomum e se parece com: connect(mapStateToProps, mapDispatchToProps)(MyComponent)
Nota: Se você quiser omitir um dos argumentos para o método connect
, você passa null
em seu lugar. Instructions
mapStateToProps()
e mapDispatchToProps()
e um novo componente React chamado Presentational
. Conecte esse componente ao Redux com o método connect
do objeto global ReactRedux
e chame-o imediatamente no componente Presentational
. Atribua o resultado a uma nova const
chamada ConnectedComponent
que representa o componente conectado. É isso aí, agora você está conectado ao Redux! Tente alterar um dos argumentos da connect
para null
e observe os resultados do teste. Tests
tests:
- text: O componente <code>Presentational</code> deve renderizar.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render.");'
- text: O componente <code>Presentational</code> deve receber uma <code>messages</code> prop por <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: O componente <code>Presentational</code> deve receber um prop <code>submitNewMessage</code> via <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');
Solution
// solution required