如何运行运行React的Redux DevTools Extension INSIDE Chrome Extension？

Question

我面临的最大问题是，当我的React应用程序在Chrome扩展程序中运行时，尝试访问Redux DevTools扩展程序中的redux存储区时遇到错误"No store found" 。

我已经看到了关于类似错误的一些问题，例如：

1. 使用Redux chrome扩展程序时“找不到存储”
2. “如何将Redux DevTools Extension添加到我的react-redux存储中？”

这些问题的大多数答案都与指定正确的变量有关，例如使用window.__REDUX_DEVTOOLS_EXTENSION__而不是devToolsExtension （在扩展升级之后），或者安装npm软件包redux-devtools-extension 。

我的问题有所不同-如果我在Chrome扩展程序之外（也不是通过Chrome扩展程序的options页面）运行我的React应用（处于开发模式），我发现Redux DevTools扩展程序对我来说很好用。 但是，正如我之前提到的，当我从Chrome扩展程序options页面中运行React应用程序时，Redux DevTools扩展程序找不到商店。

这是我在options页面中使用的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';

import App from './App';
import rootReducer from './store/reducers/root';

// 
const composeEnhancers = process.env.NODE_ENV === 'development'
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    : null
        || compose;

const store = createStore(rootReducer, composeEnhancers(
    applyMiddleware(thunk)
));

const app = (
    <Provider store={store}>
        <App />
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

我认为该错误与以下事实有关：我正在Chrome扩展程序的options页面中运行React App。 我发现在Chrome扩展程序options页面中undefined window.__REDUX_DEVTOOLS_EXTENSION__ ，但是在正常页面上可见并可以访问该window.__REDUX_DEVTOOLS_EXTENSION__变量。 在Chrome扩展程序的options页面中，是否有任何经过验证的window.__REDUX_DEVTOOLS_EXTENSION__制作方法window.__REDUX_DEVTOOLS_EXTENSION__ ？

Answer 1

在这种情况下，您可以使用Remote Redux Devtools 。

将此添加到您的商店创建中（ yarn add --dev remote-redux-devtools ）：

import devToolsEnhancer from "remote-redux-devtools";

const store = createStore(
  popupReducer,
  devToolsEnhancer({
    hostname: "localhost",
    port: 8000,
    realtime: true
  }) 
);

您还需要一台remotedev服务器，我使用了本地服务器：

yarn add --dev remotedev-server
cd /node_modules/.bin/
remotedev --port=8000

现在，您可以使用chrome扩展程序连接和监视商店，单击“远程”按钮，转到设置，然后单击那里的“使用自定义（本地）服务器”，您应该可以实时看到商店。