Redux Devtool(Chrome扩展)未显示状态

a11xaf1n 于 2023-11-19 发布在其他

关注(0)|答案(6)|浏览(213)

我是Redux的新手，也是Redux devtool的新手。
我做了一个简单的应用程序，你点击一个用户，它会显示一些关于他的数据。
所以基本上在状态下我有当前选定的用户。

但我不知道为什么状态保持在redux devtool中为空。（不在应用程序中）

这是我创建商店的地方：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

字符串
下面是行动：

export const USER_SELECTED = 'USER_SELECTED'
export function selectUser(user){
    return {
        type : USER_SELECTED,
        payload : user
    }

型
}
下面是一个reducer：

import {USER_SELECTED} from '../actions/index'
export default function (state = null,action){
    switch(action.type){
        case USER_SELECTED :
            return action.payload
    }

    return state

型
}
最后是行动号召：

this.props.selectUser(user)

型
这个应用程序运行得很好，但我可能错过了一些东西。
谢谢你的帮助！

redux

来源：https://stackoverflow.com/questions/43882238/redux-devtool-chrome-extension-not-displaying-state

6条答案

按热度按时间

ifmq2ha21#

如果您使用中间件设置了存储，请尝试以下操作

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware)
  ));

字符串

赞(0）回复(0）举报 2023-11-19

qf9go6mv2#

您是否已将此系列添加到您的商店？

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

字符串
github.com/zalmoxisus/redux开发工具扩展#11基本存储

赞(0）回复(0）举报 2023-11-19

q9rjltbz3#

我在看我几年前是怎么做的，这会起作用：

const store = createStore(reducers, 
  window.devToolsExtension && window.devToolsExtension()
)

字符串
对于那些在老项目/教程上工作的潜在redux新手来说，
window.devToolsExtension is deprecated in favor of window.REDUX_DEVTOOLS_EXTENSION，并将在Redux DevTools的下一个版本中删除：[https://git.io/fpEJZ](https://git.io/fpEJZ) 如前所述，替换为window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION()`

赞(0）回复(0）举报 2023-11-19

yqkkidmi4#

我尝试了所有的方法，但Redux仍然没有在开发工具中显示，所以我尝试了这个Chrome扩展。安装此扩展后重新加载。
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related?hl=en

它就像一个魅力

还有那些文件

store.js*

import { createStore, applyMiddleware } from "redux";           // importing redux,redux-thunk(for my own use) and redux-devtools-extension
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

const initialState = {};                               // declaring the variable with empty state
const composeEnhancers = composeWithDevTools({});
const store = createStore(                              // creating the store
finalReducer,
initialState,
composeEnhancers(applyMiddleware(thunk))               // you can leave this as it is if no middleware
);

字符串

App.js*

import { Provider } from 'react-redux';               // importing the provider and store
import store from './store'                            // using store 
ReactDOM.render(
<Provider store={store}>                              
  <App />
</Provider>,
document.getElementById('root')
);

型

赞(0）回复(0）举报 2023-11-19

lzfw57am5#

我有同样的问题.要解决你应该按照这些步骤：
1.从浏览器中删除或卸载Redux DevTools
1.下载Redux DevTools
1.安装服务器

赞(0）回复(0）举报 2023-11-19

dm7nw8vv6#

我也面临着同样的问题。我还没有得到永久的解决方案，但这里有一个解决方案-
1.更改Chrome DevTools主题，仅在需要时更改。
1.现在打开devtools，你可以在DevTools中找到扩展选项卡。
1.你可以再次改变主题，无论你想保持，这将解决你的问题。

赞(0）回复(0）举报 2023-11-19