redux devtools not showing state

user_14442889 0
Viewed 4547

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?

react-redux redux reactjs
2 Answers

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

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.

user_20316280
Related