# Присоединение данных (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)](https://721505618-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvLmy8wH1HhL0UsjoVp%2F-LvLmyaitqCV1tR5_kQb%2F-LvLnUaQh6c7jb2Y5JEQ%2Fconnect_app.jpg?generation=1575561865891255\&alt=media)

Взгляните на правую часть скриншота, и вы увидите, что в свойствах (_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) (офф.документация)
