Конфигурирование перевождь магазин с Redux Devtools (расширение хром)

Question

Я использую следующий шаблонный пример, и я пытаюсь настроить его для работы с расширением хромированной для Redux Devtools:

import { createStore, applyMiddleware } from 'redux' 
import thunkMiddleware from 'redux-thunk' 
import apiMiddleware from '../middleware/api' 
import createLogger from 'redux-logger' 
import rootReducer from '../reducers' 


const logger = createLogger({ 
    level: 'info', 
    collapsed: false, 
    logger: console, 
    predicate: (getState, action) => true 
}) 

const createStoreWithMiddleware = applyMiddleware(
    thunkMiddleware, 
    apiMiddleware, 
    logger 
)(createStore) 

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

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

    return store 

}

Я пытался добавить его следующим образом, но я получаю окно не определено ошибка:

import { compose, createStore, applyMiddleware } from 'redux' 

const createStoreWithMiddleware = compose(applyMiddleware(
    thunkMiddleware, 
    apiMiddleware, 
    logger 
),window.devToolsExtension ? window.devToolsExtension() : f => f)(createStore) 

Я предполагаю, что структура несколько отличается, чем приведенное в reudx-devto ols, но я не могу погладить его.

Как настроить магазин с промежуточными продуктами и улучшениями правильно?

Answer 1

typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' 
    ? window.devToolsExtension() 
    : f => f 

Это должно исправить ошибку.