Question

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

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

这些问题的大多数答案都与指定正确的变量有关，例如使用window.__REDUX_DEVTOOLS_EXTENSION__代替devToolsExtension（在扩展名升级后），或安装npm软件包{{1 }}。

我的问题有所不同-如果我在Chrome扩展程序之外（又不是通过Chrome扩展程序的redux-devtools-extension页运行我的React应用程序（处于开发模式），我发现Redux DevTools扩展程序可以正常工作为了我。但是，正如我之前提到的，当我从Chrome扩展options页面内运行React应用时，Redux DevTools扩展找不到该商店。

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

options

我认为该错误与以下事实有关：我正在Chrome扩展程序的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'));页内运行React App。我发现options是Chrome扩展程序window.__REDUX_DEVTOOLS_EXTENSION__页面上的undefined，但是options变量在常规页面上可见并可以访问。在Chrome扩展程序的window.__REDUX_DEVTOOLS_EXTENSION__页上是否有任何经过实践检验的方法来使window.__REDUX_DEVTOOLS_EXTENSION__可用？

Answer 1

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

将此添加到商店创建（handleChange = e => { // Fetch the name and value of the input that fired the method const {name, value} = e.target this.setState(prevState => { // Take copy of the input list let {inputs} = prevState // Find the index of the object in the input list to be updated const inputIndex = inputs.findIndex(input => input.name === name) // Update the item inputs[inputIndex].value = value return { inputs } }); };）：

yarn add --dev  remote-redux-devtools

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

import devToolsEnhancer from "remote-redux-devtools";

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

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

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

1 个答案: