使用 redux devtools（chrome 擴展）配置 redux 存儲

Question

我正在使用以下樣板示例，並嘗試將其配置為與 redux 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-devtools 擴展示例頁面中給出的結構有所不同，但我無法理解它。

如何以正確的方式使用中間件和增強功能設置商店？

Answer 1

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

這應該修復錯誤。

Answer 2

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    
const store = createStore(reducers, composeEnhancers(applyMiddleware()))