---
id: 5a24c314108439a4d4036147
title: Connect Redux to React
challengeType: 6
isRequired: false
videoUrl: ''
localeTitle: Подключите Redux к действию
---
## Description
Теперь, когда вы написали функции mapStateToProps() и mapDispatchToProps() , вы можете использовать их для отображения state и dispatch в props одного из ваших компонентов React. Метод connect из React Redux может справиться с этой задачей. Этот метод принимает два необязательных аргумента: mapStateToProps() и mapDispatchToProps() . Они являются необязательными, потому что у вас может быть компонент, которому нужен только доступ к state но ему не нужно отправлять какие-либо действия или наоборот. Чтобы использовать этот метод, передайте функции в качестве аргументов и немедленно вызовите результат с вашим компонентом. Этот синтаксис немного необычен и выглядит так: connect(mapStateToProps, mapDispatchToProps)(MyComponent) Примечание. Если вы хотите опустить один из аргументов метода connect , вы передаете null на свое место.
## Instructions
Редактор кода имеет функции mapStateToProps() и mapDispatchToProps() и новый компонент React, называемый Presentational . Подключите этот компонент к Redux с помощью метода connect из глобального объекта ReactRedux и немедленно вызовите его на компоненте Presentational . Назначьте результат новой const называемой ConnectedComponent которая представляет подключенный компонент. Вот и все, теперь вы подключены к Redux! Попробуйте изменить либо из connect аргументов «s к null и наблюдать за результатами испытаний.
## Tests
```yml
tests:
- text: Presentational компонент должен отображать.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational component should render.");'
- text: Presentational компонент должен получать messages оповещения через connect .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The Presentational component should receive a prop messages via connect.");'
- text: Presentational компонент должен получить опору submitNewMessage через connect .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational component should receive a prop submitNewMessage via connect.");'
```
## Challenge Seed
```jsx
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
This is a Presentational Component
}
};
const connect = ReactRedux.connect;
// change code below this line
```
### After Test
```js
console.info('after the test');
```
## Solution
```js
// solution required
```