Redux Devtool (расширение Chrome) не отображает состояние

Question

Я новичок в Redux и новее в Redux devtool.

Я сделал простое приложение, в котором вы нажимаете на пользователя, и оно отображает некоторые данные о нем.

Так что в основном в состоянии у меня есть текущий выбранный пользователь.

Но я не знаю, почему государство продолжает быть пустым в Redx 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)

Приложение работает очень хорошо, но я, вероятно, что-то упустил.

Спасибо за вашу помощь!

Answer 1

Вы добавили эту строку в свой магазин? github.com/zalmoxisus/redux-devtools-extension#11-basic-stor е

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

Answer 2

Попробуйте следующее, если вы настроили магазин, используя промежуточное ПО

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

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

Answer 3

Я смотрел, как я это делал много лет назад, и это помогло:

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

Для потенциальных новичков, работающих над старыми проектами / учебными пособиями, следует знать, что

window.devToolsExtensionis deprecated in favor ofокно.REDUX_DEVTOOLS_EXTENSION`и будет удален в следующей версии Redux DevTools: https://git.io/fpEJZ

как ранее ответили, замените на window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

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

Answer 5

У меня была такая же проблема. Для решения вам следует выполнить следующие шаги:

1. Удалите или удалите Redux DevTools из вашего браузера.
2. Переустановите Redux DevTools.
3. Перезагрузите свой сервер

Answer 6

Я столкнулся с той же проблемой. Я еще не получил постоянного решения, но вот обходной путь -

1. Измените тему Chrome DevTools только один раз, когда это необходимо.
2. Теперь откройте devtools, вы найдете вкладку расширения в DevTools.
3. Вы можете снова изменить тему, которую хотите сохранить, и это решит вашу проблему.