配置一個終極版存儲與終極版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擴展）

回答

相關問題