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

ОБНОВЛЕНИЕ 2018: Вышло второе издание (современный код и версии пакетов, данное издание УСТАРЕЛО)

На канале так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, присоединяйтесь!

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

В разделе "Точка входа" шла речь о некой функции connect, которая поможет нам получить в качестве props для компонента <App /> данные из store. Добавим ее:

src/containers/App.js

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)

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

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

src/reducers/index.js

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

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

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

src/containers/App.js

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) и создадим реальную структуру нашего будущего приложения.

Исходный код на текущий момент.

P.S. если вы переживаете, что HMR в данный момент не работает, обратите внимание на данный комментарий (это не обязательно, а только для тех, кто столкнулся с проблемой).

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

• connect (офф.документация)