The big issue i'm facing is I'm seeing the error "No store found"
when trying to access my redux store in the Redux DevTools Extension WHILE my React app is running inside a Chrome Extension.
I've seen a few questions on SO about similar errors, like:
Most of the answers to these questions relate to specifying the correct variables like using window.__REDUX_DEVTOOLS_EXTENSION__
instead of devToolsExtension
(after the extension was upgraded), or installing the npm
package redux-devtools-extension
.
My problem is different - if I run my a React app (in development mode), outside of the Chrome Extension (aka not through the Chrome Extension's options
page), I find that the Redux DevTools Extension works fine for me. However, as I mentioned before, when I run the React app from within the Chrome Extension options
page, the Redux DevTools Extension cannot find the store.
Here is my index.js
file that I use inside the options
page:
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'));
I believe the error has to do with the fact that that I'm running the React App from within the options
page of my Chrome Extension. I've found that window.__REDUX_DEVTOOLS_EXTENSION__
is undefined
from the Chrome Extension options
page, but that window.__REDUX_DEVTOOLS_EXTENSION__
variable is visible and accessible on normal pages. Is there any tried and tested way of making window.__REDUX_DEVTOOLS_EXTENSION__
available in the options
page of a Chrome Extension?
You can use Remote Redux Devtools in this case.
Add this to your store creation ( yarn add --dev remote-redux-devtools
):
import devToolsEnhancer from "remote-redux-devtools";
const store = createStore(
popupReducer,
devToolsEnhancer({
hostname: "localhost",
port: 8000,
realtime: true
})
);
You will also need a remotedev server, I went with a local one:
yarn add --dev remotedev-server
cd /node_modules/.bin/
remotedev --port=8000
Now you can connect and monitor your store using the chrome extension , click the Remote button, go to settings and click "Use custom (local) server" there and you should see your store in realtime.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.