redux devtools not showing state - reactjs

Question

can anybody please tell me why is my redux app not working? I have been going step by step from tutorial from youtube but my state isn't event shown in redux dev tools. All I have there is 'states are equal'.
counter.js file (reducer)
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
}
export default counterReducer;
index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//reducer
import counterReducer from './Reducers/counter';
//store
import {createStore} from 'redux';
//provider
import { Provider } from 'react-redux';
const store = createStore(
counterReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
What Am I doing wrong?

Answer 1

try this code below in your index.js file.
import { createStore, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
counterReducer,
composeEnhancers()
);
and if you are using any middleware like redux-thunk, then do as following,
import { createStore, applyMiddleware, compose } from 'redux';
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(thunk))
);

Answer 2

If you want to update anything inside redux store then you have to dispatch an action mandatorily. Create an action, dispatch that action from your component. Then you will see everything working.

Answer 3

The above rated solution is accurate, but we have some cases when we don't want the end users to see our state using React DevTools. For example, in a production environment, we don't want this to happen. To implement this functionality use this chunk of code.
import { createStore, compose } from 'redux';
// if env is not equal to 'production', show state in Redux DevTools
const composeEnhancers = (process.env.REACT_APP_NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
const store = createStore(counterReducer,composeEnhancers());
// rest of the code goes here...

Answer 4

My solution was to change from "Autoselect instances" in the right upper corner to my own instance. The state was 'hidden' and that's why I couldn't see it despite configured everything correctly.