如果未安装 Redux DevTools Extension，则 Redux App 无法运行答案

【问题标题】：Redux App not working if Redux DevTools Extension is not installed如果未安装 Redux DevTools Extension，则 Redux App 无法运行
【发布时间】：2018-08-17 20:23:11
【问题描述】：

我已按照此处的指南进行操作：https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html（部分：Redux DevTools）

商店的配置方式如下：

// @flow

import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';

const initialState = {};

const configureStore = () => {
  const epicMiddleware = createEpicMiddleware(epic);
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
  const store = createStore(createReducer(), initialState, enhancers);
  return store;
};

export { configureStore };

但是，如果我没有安装 Redux Devtools Extension，我的 React 应用程序（使用 CRA 引导）将无法运行。

谁能告诉我我做错了什么？

缺少扩展的错误日志：https://pastebin.com/qzcbXCYQ

编辑：我是个白痴。商店在两个文件中定义，我没有更改从中导入它的那个。清理了重复项，它按预期工作。

【问题讨论】：

是的，你必须添加 redux 开发工具。因为安装开发工具后，您无法将其添加到您的商店。
嗯，不，当扩展不存在时，它应该默认使用redux 中的compose。
当您没有安装开发工具时，您会遇到什么错误？有关您的项目（构建设置等）的更多信息也可能会有所帮助。
@noppa 这是香草 CRA（未弹出），错误日志在这里：pastebin.com/qzcbXCYQ

标签： reactjs redux react-redux create-react-app redux-devtools-extension

【解决方案1】：

为了方便起见，您可以使用 npm 中的 redux-devtools-extension 包。

要安装它运行：

npm install --save-dev redux-devtools-extension

并像这样使用：

// @flow

import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';

import { composeWithDevTools } from 'redux-devtools-extension';


const initialState = {};

const configureStore = () => {
  const epicMiddleware = createEpicMiddleware(epic);
  const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
  const store = createStore(createReducer(), initialState, composeWithDevTools(
      applyMiddleware(epicMiddleware),
      // other store enhancers if any
));
  return store;
};

export { configureStore };

【讨论】：

如果已经在 Chrome 中安装了扩展程序并且不想对其进行 NPM？

【解决方案2】：

我遇到了类似的问题。我只需要调整一条线。我是从这里开始的：

const composeEnhancers = !__PROD__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose

到这里：

const composeEnhancers = !__PROD__ ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose

在我的情况下，我有可用的 __PROD__ 变量，但可以根据您的情况进行调整。逻辑保持不变。

【讨论】：

【解决方案3】：

这个问题通常出现在没有 redux-devtool 的浏览器上（也可能出现在 chrome incognito chrome 中）

我认为你应该检查你的 composeEnhancers

  const composeEnhancers =
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

参考：https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

【讨论】：