Настройка Store

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

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

Настройка Store

Для начала, повторим то, что нам уже известно про store, и быть может добавим чуть-чуть нового. Итак:

Store хранит состояние приложения. Единственный путь изменить store - это отправить действие (dispatch action).

Store - это не класс. Это обычный объект с несколькими методами, а именно:

• getState()

• dispatch(action)

• subscribe(listener)

• replaceReducer(nextReducer)

Создадим функцию конфигурации store

store/configureStore.js

import { createStore, applyMiddleware } from 'redux'
import rootReducer from '../reducers'

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState)
  return store
}

Ничего необычного, строго по документации: передаем rootReducer в только что импортированную функцию createStore.

В Redux версии 2.x.x мы должны явно указать, что reducers поддерживают hot reload. Сделать это достаточно просто. Если взглянуть в начало кода, видно, что мы импортируем так называемый корневой редьюсер (rootReducer), который по сути и отражает все состояние нашего приложения. Теперь посмотрим еще выше по туториалу - ага, у store есть подходящая функция - replaceReducer

Теперь взяв за основу отличный видео скринкаст про Webpack, мы знаем, что hot reload ожидает от нас функции accept. Вуаля, пора вносить правки.

store/configureStore.js

import { createStore } from 'redux'
import rootReducer from '../reducers'

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState)

  if (module.hot) {
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers')
      store.replaceReducer(nextRootReducer)
    })
  }

  return store
}

К сожалению, наш код до сих пор не работает. Webpack ругается на отсутствующий reducer. Давайте исправим это, и я обещаю, наконец-то можно будет посмотреть на результат в браузере.