Точка входа

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

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

Точка входа

Подтянем Redux и react-redux в наш проект:

npm i redux react-redux --save

Как уже было описано в разделе "подготовка", точка входа в наше приложение - src/index.js

Обновим его содержание:

src/index.js

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'

const store = createStore( () => {}, {}) //WAT ;)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Итак, первый компонент из мира Redux - <Provider /> ( [EN] документация ).

Благодаря этому компоненту, мы сможем получать необходимые данные из store нашего приложения, если воспользуемся вспомогательной функцией connect, речь о которой пойдет далее. Сейчас нам и получать нечего, так как store у нас - пустой объект.

Давайте подробнее посмотрим на строку:

const store = createStore( () => {}, {})

Во-первых, если вам трудно читать ES2015 код, то переводите его в привычный ES5, с помощью babel-playground.

Во-вторых, давайте взглянем на документацию метода createStore: принимает один обязательный аргумент (функцию reducer) и парочку не обязательных (начальное состояние и "усилители").

Теперь переведем то, что мы написали, когда присваивали store: Возьми пустую анонимную функцию в качестве редьюсера и пустой объект в качестве начального состояния. Если коротко: возьми ничего и "ничего" не делай.

Предлагаю вынести создание store в отдельный файл, для того, чтобы добавить возможность HMR и для более удобной работы с reducer'ом и усилителями (enhancers).

src/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './containers/App'
import configureStore from './store/configureStore'

const store = configureStore()

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Усилители - это middleware функции. Если читатель знаком с express.js, то он знаком с усилителями в redux. Для остальных: типичный усилитель - логгер (logger), который просто пишет в консоль все что происходит с наблюдаемым объектом.

Если посмотреть в консоль, webpack все так же усердно работает и сообщает об ошибке: нет файла configureStore... Пора создать, а текущий код можно взять здесь.