I have built an app with react and redux. I build the app in the standard way.
npm run build --prod
The app is then deployed to firebase hosting. I found that the app will not load in Chrome, Firefox, or Safari unless the redux web dev tools are installed. Why is this and how can I stop it?
The app is at ... https://triviatime-e7aa2.web.app/
Configure redux dev tools with redux-devtools-extension npm package.
import { composeWithDevTools } from "redux-devtools-extension";
export const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(...middleware))
);
See section 1.3 in following link for more information.
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
Another option
import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware)
));
Related
I built a chrome extension with react.js and webpack.config.js . now I want add redux to my project but I don't know how to configure with redux
I just find the reduxed-chrome-storage npm package but I don't know how to configure
First, you need to install the dependencies for Redux and the reduxed-chrome-storage package:
npm install --save redux reduxed-chrome-storage
Create a store.js file where you will configure your Redux store. In this file, you will import the necessary dependencies and define the store.
import { createStore, applyMiddleware } from 'redux';
import storage from 'reduxed-chrome-storage';
const store = createStore(
rootReducer,
applyMiddleware(storage.middleware)
);
export default store;
Connect your React components to the Redux store by using the react-redux library. You will need to wrap your root component with the Provider component and pass the store as a prop.
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
function App() {
return (
<Provider store={store}>
{/* your application code */}
</Provider>
);
}
export default App;
Finally, you need to add the reduxed-chrome-storage enhancer to the store. This will allow the store to be persisted to Chrome storage:
import { createStore, applyMiddleware } from 'redux';
import storage from 'reduxed-chrome-storage';
const store = createStore(
rootReducer,
applyMiddleware(storage.middleware),
storage.enhancer
);
export default store;
This is the basic configuration for using Redux with your Chrome extension. You can now start using Redux in your application.
I used to use Redux-Logger before and everything was fine, but when I want to use Redux-dev-Tools and I want to add this code:
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
it does not work and gives an error.
First of all, I suggest you read the redux dev tools documentation. And I think your problem is not using the compose function.
Please edit your code as written below:
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';
const initialState = {};
const middleware = [];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
Or you can use the function inside the package by installing the Redax-dev-Tools package:
npm install redux-devtools-extension
Or if you use yarn:
yarn add redux-devtools-extension
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
));
I am following tutorial on React and instructor install an extension on Chrome, the Redux Devtools. In my case i am wondering why my extension seems to be inactive (in color gray). In my chrome extension settings, it is On, site access is set On all sites, Allow access to file URLs
is on but when i view my Redux tab, it shows:
No store found. Make sure to follow the instructions.
On the .js file, there is a declaration something like this:
const ReactReduxDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
let store;
if(window.navigator.userAgent.includes("Chrome") && ReactReduxDevTools){
store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
ReactReduxDevTools)
);
}else{
...
}
What could be the problem? Compatibility with the Chrome?
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import reducers from './reducers';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware()))
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
It only works when it detects a store on the application you are running. It makes sense since there is nothing to be shown.
Start an application with Redux correctly wired up and it will appear colored and will have very useful information.
EDIT:
I think I found it. Check the code correction. The compose method must be raplace if a __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ exists.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
let store;
store = createStore(
rootReducer,
initialState,
composeEnhancers(
applyMiddleware(...middleware)
);
No if statements
The easier way to apply if you have multiple middlewares.
Install extension using npm or yarn
npm install --save redux-devtools-extension
Apply to store.js or wherever your store is initialized
import { composeWithDevTools } from 'redux-devtools-extension';
const middlewares = [] //put your middleware over here
export const store = createStore(Reducer,composeWithDevTools(
applyMiddleware(...middlewares))
);
I am working on a React Native app, but for some reasons I have the redux devtools not able to detect the store.
Here is the code for store.js
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import jobs from './reducers/jobs';
import { watcherSaga } from './sagas';
// Saga Middleware
const sagaMiddleware = createSagaMiddleware();
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(jobs, composeEnhancer(applyMiddleware(sagaMiddleware)));
sagaMiddleware.run(watcherSaga);
// Enable Hot Module for the reducers
/* eslint-disable global-require */
if (module.hot) {
// module.hot.accept('./reducers/index', () => {
// store.replaceReducers(require('./reducers').default);
// });
}
export default store;
When I open the chrome debugger-ui I get "No store found" in the redux tab.
I already gave access to files url from the extension settings. I have no idea what can be the problem. I tried several store settings with middleware and redux-tools, found on tutorial, but none of them seems to work. I tried also the standalone app but it does not detect anything, neither the react code.
What am I doing wrong?
I found the solution and I share it so will help others.
The main problem is that I am using expo, so expo runs on a different port than the normal devtools.
Instead of using chrome I downloaded the standalone debugger and then, thanks to this article, I opened the debugger with the correct port, this did the magic:
rndebugger://set-debugger-loc?host=localhost&port=19001
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:
“No store found” when using Redux chrome extension"
"How to add Redux DevTools Extension to my react-redux store?"
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 (a.k.a. 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.