Настройка Store

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

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

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

  • getState()
  • dispatch(action)
  • subscribe(listener)
  • replaceReducer(nextReducer)

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

src/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. Вуаля, пора вносить правки.

src/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. Давайте исправим это, и верьте, наконец-то можно будет посмотреть на результат в браузере.

results matching ""

    No results matching ""