# Присоединение данных (connect)

*ОБНОВЛЕНИЕ 2018: Вышло* [*второе издание*](https://maxfarseer.gitbooks.io/redux-course-ru-v2/content/) *(современный код и версии пакетов, данное издание УСТАРЕЛО)*

*На* [*канале*](http://bit.ly/2IqH74P) *так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы,* [*присоединяйтесь*](http://bit.ly/2IqH74P)*!*

### Связывание данных из store с компонентами приложения

В разделе ["Точка входа"](https://maxfarseer.gitbooks.io/redux-course-ru/content/tochka_vhoda.html#connect) шла речь о некой функции *connect*, которая поможет нам получить в качестве props для компонента `<App />` данные из store. Добавим ее:

*src/containers/App.js*

```javascript
import React, { Component } from 'react'
import { connect } from 'react-redux'

class App extends Component {
  render() {
    return <div>Привет из App, { this.props.user }!</div>
  }
}

function mapStateToProps (state) {
  return {
    user: state.user
  }
}

export default connect(mapStateToProps)(App)
```

Назначение функции connect вытекает из названия: **подключи** React компонент к Redux store.

Результат работы функции connect - новый присоединенный компонент, который оборачивает переданный компонент.

У нас был компонент `<App />`, а на выходе получился `<Connected(App)>`. В этом не трудно убедиться, если взглянуть в react dev tools.

![Connect(App)](/files/-LvLnUaQh6c7jb2Y5JEQ)

Взгляните на правую часть скриншота, и вы увидите, что в свойствах (*props*) нашего компонента `<App />` теперь есть метод redux store - **dispatch**, и объект (в нашем случае, пока что строка) user. Это так же результат работы функции connect.

Давайте еще поиграемся с простым примером. Для начала изменим набор данных:

*src/reducers/index.js*

```javascript
const initialState = {
  name: 'Василий',
  surname: 'Реактов',
  age: 27
}

export default function userstate(state = initialState) {
  return state
}
```

затем подкрутим компонент:

*src/containers/App.js*

```javascript
import React, { Component } from 'react'
import { connect } from 'react-redux'

class App extends Component {
  render() {
    const { name, surname, age } = this.props.user
    return <div>
      <p>Привет из App, {name} {surname}!</p>
      <p>Тебе уже {age} ?</p>
    </div>
  }
}

function mapStateToProps (state) {
  return {
    user: state
  }
}

export default connect(mapStateToProps)(App)
```

Все работает ровно так, как мы указали: в объект user "подключилось" все состояние нашего приложения state, которое сейчас очень простое и описано в *src/reducer/index.js*.

Прежде чем мы перейдем к созданию actions и взаимодействию пользователя со страницей, давайте поговорим о комбинировании редьюсеров (*combineReducers*) и создадим реальную структуру нашего будущего приложения.

[Исходный код](https://github.com/maxfarseer/redux-ru-tutorial/tree/create_reducer) на текущий момент.

## P.S. если вы переживаете, что HMR в данный момент не работает, обратите внимание на данный [комментарий](https://toster.ru/q/293209#comment_1077442) (это не обязательно, а только для тех, кто столкнулся с проблемой).

Полезные ссылки:

* [connect](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) (офф.документация)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://max-frontend.gitbook.io/redux-course-ru/struktura_prilozheniya/prisoedinenie_dannih_connect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.