301 lines
7.2 KiB
Markdown
301 lines
7.2 KiB
Markdown
---
|
|
id: 5a24c314108439a4d4036148
|
|
title: Conectar o Redux ao app de mensagens
|
|
challengeType: 6
|
|
forumTopicId: 301427
|
|
dashedName: connect-redux-to-the-messages-app
|
|
---
|
|
|
|
# --description--
|
|
|
|
Agora que você entendeu como usar `connect` para conectar o React ao Redux, você pode aplicar o que aprendeu ao seus componentes React que lidam com mensagens.
|
|
|
|
Na última lição, o componente que você conectou ao Redux foi nomeado `Presentational`, e isso não foi arbitrário. Esse termo *geralmente* refere-se a componentes React que não estão conectados diretamente ao Redux. Eles simplesmente são responsáveis pela apresentação da interface do usuário e fazem isso como uma função das props que recebem. Em contraste, os componentes de contêiner são conectados ao Redux. Estes são tipicamente responsáveis por despachar ações ao store e, frequentemente, passam o state do store para componentes filhos como props.
|
|
|
|
# --instructions--
|
|
|
|
O editor de código tem todo o código que você escreveu nesta seção até agora. A única alteração é que o componente React é renomeado para `Presentational`. Crie um novo componente mantido em uma constante chamada `Container` que usa `connect` para conectar o componente `Presentational` ao Redux. Em seguida, no `AppWrapper`, renderize o componente `Provider` do Redux React. Passe `Provider` ao `store` do Redux como prop e renderize `Container` como filho. Assim que tudo estiver pronto, você verá as mensagens do app renderizadas na página novamente.
|
|
|
|
# --hints--
|
|
|
|
O `AppWrapper` deve ser renderizado na página.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
|
return mockedComponent.find('AppWrapper').length === 1;
|
|
})()
|
|
);
|
|
```
|
|
|
|
O componente `Presentational` deve ser renderizado na página.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
|
return mockedComponent.find('Presentational').length === 1;
|
|
})()
|
|
);
|
|
```
|
|
|
|
O componente `Presentational` deve renderizar os elementos `h2`, `input`, `button` e `ul`.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
|
const PresentationalComponent = mockedComponent.find('Presentational');
|
|
return (
|
|
PresentationalComponent.find('div').length === 1 &&
|
|
PresentationalComponent.find('h2').length === 1 &&
|
|
PresentationalComponent.find('button').length === 1 &&
|
|
PresentationalComponent.find('ul').length === 1
|
|
);
|
|
})()
|
|
);
|
|
```
|
|
|
|
O componente `Presentational` deve receber `messages` do store Redux como prop.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
|
const PresentationalComponent = mockedComponent.find('Presentational');
|
|
const props = PresentationalComponent.props();
|
|
return Array.isArray(props.messages);
|
|
})()
|
|
);
|
|
```
|
|
|
|
O componente `Presentational` deve receber o criador de ação `submitMessage` como prop.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
|
const PresentationalComponent = mockedComponent.find('Presentational');
|
|
const props = PresentationalComponent.props();
|
|
return typeof props.submitNewMessage === 'function';
|
|
})()
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --after-user-code--
|
|
|
|
```jsx
|
|
ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
|
```
|
|
|
|
## --seed-contents--
|
|
|
|
```jsx
|
|
// Redux:
|
|
const ADD = 'ADD';
|
|
|
|
const addMessage = (message) => {
|
|
return {
|
|
type: ADD,
|
|
message: message
|
|
}
|
|
};
|
|
|
|
const messageReducer = (state = [], action) => {
|
|
switch (action.type) {
|
|
case ADD:
|
|
return [
|
|
...state,
|
|
action.message
|
|
];
|
|
default:
|
|
return state;
|
|
}
|
|
};
|
|
|
|
const store = Redux.createStore(messageReducer);
|
|
|
|
// React:
|
|
class Presentational 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() {
|
|
this.setState((state) => {
|
|
const currentMessage = state.input;
|
|
return {
|
|
input: '',
|
|
messages: 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>
|
|
);
|
|
}
|
|
};
|
|
|
|
// React-Redux:
|
|
const mapStateToProps = (state) => {
|
|
return { messages: state }
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
submitNewMessage: (newMessage) => {
|
|
dispatch(addMessage(newMessage))
|
|
}
|
|
}
|
|
};
|
|
|
|
const Provider = ReactRedux.Provider;
|
|
const connect = ReactRedux.connect;
|
|
|
|
// Define the Container component here:
|
|
|
|
|
|
class AppWrapper extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
render() {
|
|
// Complete the return statement:
|
|
return (null);
|
|
}
|
|
};
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```jsx
|
|
// Redux:
|
|
const ADD = 'ADD';
|
|
|
|
const addMessage = (message) => {
|
|
return {
|
|
type: ADD,
|
|
message: message
|
|
}
|
|
};
|
|
|
|
const messageReducer = (state = [], action) => {
|
|
switch (action.type) {
|
|
case ADD:
|
|
return [
|
|
...state,
|
|
action.message
|
|
];
|
|
default:
|
|
return state;
|
|
}
|
|
};
|
|
|
|
const store = Redux.createStore(messageReducer);
|
|
|
|
// React:
|
|
class Presentational 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() {
|
|
this.setState((state) => {
|
|
const currentMessage = state.input;
|
|
return {
|
|
input: '',
|
|
messages: 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>
|
|
);
|
|
}
|
|
};
|
|
|
|
// React-Redux:
|
|
const mapStateToProps = (state) => {
|
|
return { messages: state }
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
submitNewMessage: (newMessage) => {
|
|
dispatch(addMessage(newMessage))
|
|
}
|
|
}
|
|
};
|
|
|
|
const Provider = ReactRedux.Provider;
|
|
const connect = ReactRedux.connect;
|
|
|
|
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
|
|
|
|
class AppWrapper extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
render() {
|
|
return (
|
|
<Provider store={store}>
|
|
<Container/>
|
|
</Provider>
|
|
);
|
|
}
|
|
};
|
|
```
|