使用 redux devtools（chrome 扩展）配置一个 redux 存储答案

【问题标题】：Configure a redux store with redux devtools (the chrome extension)使用 redux devtools（chrome 扩展）配置一个 redux 存储
【发布时间】：2016-10-12 09:32:20
【问题描述】：

我正在使用以下样板示例，并尝试将其配置为与 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 扩展示例页面中给出的结构有所不同，但我无法确定。

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

【问题讨论】：

没有定义窗口？这段代码没有在浏览器中运行吗？
本视频解释了如何将 redux devtool 连接到基本的 react redux 应用 - youtu.be/TSOVLXQPWgA

标签： javascript reactjs ecmascript-6 redux redux-devtools

【解决方案1】：

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

这应该可以修复错误。

【讨论】：

@S.Schenk 我不确定你是如何运行你的 React 应用程序的（webpack-dev-server？express？）。当我尝试服务器渲染我的 React 应用程序时，我遇到了类似的问题，因为 window 仅适用于浏览器。所以在你的代码中，只要检查window是否存在，就可以避免错误。
成功了，谢谢！真的应该有人更新文档

【解决方案2】：

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

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

【讨论】：