5.6 KiB
5.6 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036144 | Use Provider to Connect Redux to React | 6 | false | Use o provedor para conectar o Redux para reagir |
Description
react-redux
para ajudar a realizar essas tarefas. O React Redux fornece uma pequena API com dois recursos principais: Provider
e connect
. Outro desafio abrange a connect
. O Provider
é um componente wrapper do React Redux que envolve seu aplicativo React. Este wrapper permite que você acesse as funções de store
e dispatch
do Redux em toda a árvore de componentes. Provider
leva dois adereços, o armazenamento Redux e os componentes filhos do seu aplicativo. Definir o Provider
para um componente de aplicativo pode ser assim: <Loja do provedor = {store}>
<App />
</ Provedor>
Instructions
DisplayMessages
do Redux. A única peça nova é o componente AppWrapper
na parte inferior. Use este componente de nível superior para renderizar o Provider
partir do ReactRedux
e passe o repositório do Redux como prop. Em seguida, renderize o componente DisplayMessages
como um filho. Quando terminar, você verá o componente React renderizado na página. Nota: React Redux está disponível como uma variável global aqui, então você pode acessar o Provider com notação de ponto. O código no editor tira proveito disso e o configura para um Provider
constante para você usar no método de renderização AppWrapper
. Tests
tests:
- text: O <code>AppWrapper</code> deve renderizar.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The <code>AppWrapper</code> should render.");'
- text: 'O componente wrapper <code>Provider</code> deve ter um prop de <code>store</code> passado para ele, igual ao repositório Redux.'
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput("index").replace(/\s/g,"").includes("<Providerstore={store}>"); })(), "The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.");'
- text: <code>DisplayMessages</code> deve renderizar como filho do <code>AppWrapper</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").find("DisplayMessages").length === 1; })(), "<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.");'
- text: 'O componente <code>DisplayMessages</code> deve renderizar um elemento h2, input, button e <code>ul</code> .'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h2").length === 1 && mockedComponent.find("button").length === 1 && mockedComponent.find("ul").length === 1; })(), "The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.");'
Challenge Seed
// Redux Code:
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message
}
};
const messageReducer = (state = [], action) => {
switch (action.type) {
case ADD:
return [
...state,
action.message
];
default:
return state;
}
};
const store = Redux.createStore(messageReducer);
// React Code:
class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
submitMessage() {
const currentMessage = this.state.input;
this.setState({
input: ",
messages: this.state.messages.concat(currentMessage)
});
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
<input
value={this.state.input}
onChange={this.handleChange}/><br/>
<button onClick={this.submitMessage}>Submit</button>
<ul>
{this.state.messages.map( (message, idx) => {
return (
<li key={idx}>{message}</li>
)
})
}
</ul>
</div>
);
}
};
const Provider = ReactRedux.Provider;
class AppWrapper extends React.Component {
// render the Provider here
// change code above this line
};
After Test
console.info('after the test');
Solution
// solution required