redux devtools 不显示状态

Question

谁能告诉我为什么我的 redux 应用程序无法运行？我一直在从 youtube 的教程一步步进行，但我的状态没有在 redux 开发工具中显示。我所知道的就是“国家平等”。

counter.js 文件（减速器）

const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
    
        default:
            return state;
    }
}

export default counterReducer;

索引.js 文件

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

我究竟做错了什么？

Answer 1

在您的 index.js 文件中尝试下面的代码。

    import { createStore, compose } from 'redux';    

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    
    const store = createStore(
      counterReducer,
      composeEnhancers()
    );

如果您使用任何中间件（例如 redux-thunk），请执行以下操作，

    import { createStore, applyMiddleware, compose } from 'redux';

    const store = createStore(
      rootReducer,
      composeEnhancers(applyMiddleware(thunk))
    );