redux devtools未显示状态

5uzkadbs  于 2022-11-12  发布在  其他
关注(0)|答案(3)|浏览(332)

有人能告诉我为什么我的redux应用程序不工作吗?我一直在从YouTube教程一步一步地去,但我的状态不是事件显示在redux开发工具。所有我有是'状态是平等的'。

计数器.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')
);

我做错了什么?

5kgi1eie

5kgi1eie1#

请在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))
    );
ssgvzors

ssgvzors2#

如果你想更新redux存储中的任何东西,那么你必须强制分派一个操作。创建一个操作,从你的组件分派该操作。然后你会看到一切都在工作。

bfhwhh0e

bfhwhh0e3#

以上评级的解决方案是准确的,但我们在某些情况下不希望最终用户看到我们使用React DevTools的状态。例如,在生产环境中,我们不希望这种情况发生。要实现此功能,请使用以下代码块。

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

相关问题