配置一个终极版存储与终极版devtools（Chrome扩展）

我使用以下样板例子，我想它配置使用Chrome扩展程序工作的终极版devtools：配置一个终极版存储与终极版devtools（Chrome扩展）

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扩展示例页面，但我不能把它放在手指上。

如何使用中间件和增强功能以正确的方式设置商店？

来源

2016-06-11 S. Schenk

窗口未定义？这段代码是不是在浏览器中运行？ –

这段视频解释了如何将redux devtool连接到基本的reactx应用程序 - https://youtu.be/TSOVLXQPWgA – Prem

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

这应该修复错误。

来源

2016-06-15 07:06:42 xiaofan2406

@ S.Schenk我不确定你是如何运行你的React应用程序的（webpack-dev-server？express？）。当我尝试渲染我的React应用程序时，我遇到了类似的问题，因为'''window'''只适用于浏览器。所以在你的代码中，只要检查是否存在''''window'''，那么你就可以避免这个错误。 – xiaofan2406

这样做，谢谢！有人应该真的更新文档 –

配置一个终极版存储与终极版devtools（Chrome扩展）

回答

相关问题