javascript - window.__REDUX_DEVTOOLS_EXTENSION_COMPOSER__ 在 Electron 应用程序中未定义

Question

试图让 redux-devtools-extension 在我的由 Electron 打包的 Redux 应用程序上工作。

我正在使用电子 v5.0.7，电子开发工具安装程序 v2.2.4

如果我在本地（在 Electron 中）启动 Electron 应用程序，并查看 devtools 中的 Redux 部分，它会给我一个错误“未找到商店。确保按照说明进行操作。” 如果我通过 localhost 访问这个电子应用程序的 Web 版本，我可以看到 redux-devtools 正在工作。

这是我的 main.js for Electron 使用 electron-devtools-installer 安装扩展的方式，根据他们的文档：

app.on('ready', () => {
  createWindow();
  if (serve) {
    try {
      const { 
        default: installExtension,
        REDUX_DEVTOOLS
      } = require('electron-devtools-installer');

      installExtension(REDUX_DEVTOOLS)
        .then((name) => console.log(`Added Extension:  ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
    } catch (e) {
      log.error('ERROR FROM ADDING DEVTOOLS: ', e);
    }
  }
});

当我的电子窗口打开时，它会记录Added Extension: Redux DevTools

这是我根据他们的文档将 redux-devtools 添加到我的商店的方法：

import {
  createStore, combineReducers, applyMiddleware, compose,
} from 'redux';
import ReduxThunk from 'redux-thunk';
import { UserSettings, CurrentViewedAccount } from './ducks/index';

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;

const enhancer = composeEnhancers(applyMiddleware(ReduxThunk));

const appReducer = combineReducers({
  UserSettings: UserSettings.default,
  CurrentViewedAccount: CurrentViewedAccount.default,
});

const rootReducer = (state, action) => {
  return appReducer(state, action);
};

const store = createStore(rootReducer, enhancer);

export default store;

当我尝试查看商店窗口中的内容时，REDUX_DEVTOOLS_EXTENSION_COMPOSE未定义。

当它在 Electron 中运行时，似乎有一个断开连接，因为它作为一个普通的 Web 应用程序工作。我很想知道是否有人能够让它工作？

标签： javascriptreduxreact-reduxelectronredux-devtools-extension