CODEWITHSUNDEEP
reactjsreduxreact-redux
Pinncik
Pinncik

Reputation: 321

redux devtools not showing state

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?

Upvotes: 4

Views: 10582

Answers (4)

testing_22
testing_22

Reputation: 2585

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.

autoselect instances

Upvotes: 3

Ibad Shah
Ibad Shah

Reputation: 539

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...

Upvotes: 0

asif.ibtihaj
asif.ibtihaj

Reputation: 391

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))
    );

Upvotes: 6

Sudarshan Tanwar
Sudarshan Tanwar

Reputation: 3607

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.

Upvotes: 0

Related Questions