redux devtools not showing state

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

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.