Redux Devtool（chrome扩展）不显示状态答案

【问题标题】：Redux Devtool (chrome extension) not displaying stateRedux Devtool（chrome扩展）不显示状态
【发布时间】：2017-10-08 11:57:02
【问题描述】：

我是 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
    }

}

这是一个减速器：

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)

该应用运行良好，但我可能遗漏了一些东西。

感谢您的帮助！

【问题讨论】：

您是否将此行添加到您的商店？ github.com/zalmoxisus/redux-devtools-extension#11-basic-storewindow.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
就是这样！谢谢，真的！！！
不用担心。很高兴我能提供帮助。我会将其发布为您接受的答案:)
这个视频解释了如何将 redux devtool 连接到基本的 react redux 应用程序 - youtu.be/TSOVLXQPWgA

标签： javascript reactjs redux redux-devtools-extension

【解决方案1】：

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

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

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

【讨论】：

谢谢❤️。这个答案解决了我的问题。

【解决方案2】：

您是否将此行添加到您的商店？

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

github.com/zalmoxisus/redux-devtools-extension#11-basic-stor‌e

【讨论】：

【解决方案3】：

几年前我正在研究我是如何做到的，这会成功：

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

对于从事旧项目/教程的潜在 redux 新手来说，他们知道

window.devToolsExtensionis deprecated in favor ofwindow.REDUX_DEVTOOLS_EXTENSION`，将在下一版本的 Redux DevTools 中删除：https://git.io/fpEJZ

如前所述，替换为window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

【讨论】：

【解决方案4】：

我尝试了所有方法，但 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')
);

【讨论】：