The devtools needs to be within your compose.
Try:
let store;
const initStore = ({onRehydrationComplete}) => {
store = createStore(
combineReducers({
...reactDeviseReducers,
form: formReducer,
router: routerReducer,
apollo: apolloClient.reducer(),
cats: catReducer
}),
{},
compose(
applyMiddleware(
thunk,
routerMiddleware(history),
apolloClient.middleware()
),
autoRehydrate(),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
persistStore(store, {
blacklist: [
'form'
]
}, onRehydrationComplete);
return store;
};
Answer from RodCardenas on Stack OverflowThe devtools needs to be within your compose.
Try:
let store;
const initStore = ({onRehydrationComplete}) => {
store = createStore(
combineReducers({
...reactDeviseReducers,
form: formReducer,
router: routerReducer,
apollo: apolloClient.reducer(),
cats: catReducer
}),
{},
compose(
applyMiddleware(
thunk,
routerMiddleware(history),
apolloClient.middleware()
),
autoRehydrate(),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
persistStore(store, {
blacklist: [
'form'
]
}, onRehydrationComplete);
return store;
};
In compose, you need to return the arguments when the extension is not available:
compose(
applyMiddleware(thunk, logger),
window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__()
: args => args,
),
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
» npm install redux-devtools-extension
I faced similar issue. I didn't have Redux tab in Chrome Dev Tools Panel after installing Redux DevTools. Everything worked once I quitted the browser and reloaded it.
Hit Ctrl+Shift+I, or F12.
You will then open up the Developer Tools.
Scroll to the right, and you will see a Redux tab at the end of Developer Tools.

Then select the bottom option to pin to the bottom:

To make things easier, you can use the redux-devtools-extension package from npm.
To install it run:
npm install --save-dev redux-devtools-extension
and to use like so:
// @flow
import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';
import { composeWithDevTools } from 'redux-devtools-extension';
const initialState = {};
const configureStore = () => {
const epicMiddleware = createEpicMiddleware(epic);
const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
const store = createStore(createReducer(), initialState, composeWithDevTools(
applyMiddleware(epicMiddleware),
// other store enhancers if any
));
return store;
};
export { configureStore };
I was experiencing a similar issue. I just needed to tweak a single line. I went from this:
const composeEnhancers = !__PROD__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose
To this:
const composeEnhancers = !__PROD__ ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose
In my case I have the __PROD__ variable available, but tweak that to suit your situation. Logic remains the same.
I faced a similar problem, the following worked for me.
Goto extensions settings for redux Devtools in chrome extensions and check Allow Access to file URLs settings.
Extensions > Redux Devtools > Allow Access to file URLs
I had the same issue where the option REDUX did not appear in the top menu Chrome browser.
- In "Manage Extensions", I made sure Redux DevTools was active and updated.
- I reloaded the page.
- Right click >> Redux DevTools >> Open in a panel(enable in browser settings)
- Right click >> Inspect
Now, verify "Redux" appears in the top menu next to Elements, Console, ... , Lighthouse, etc.
Redux DevTools extension should be working in chrome-devtools.
Try the following if you have setup the store using a middleware
import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware)
));
Did you add this line to your store?
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
github.com/zalmoxisus/redux-devtools-extension#11-basic-store

