Как запустить расширение Redux DevTools INSIDE Chrome с запущенным React?

Question

Большая проблема, с которой я сталкиваюсь, заключается в том, что я вижу ошибку "No store found" при попытке получить доступ к моему хранилищу редуксов в Расширении Redux DevTools В то время как мое приложение React работает внутри Расширения Chrome.

Я видел несколько вопросов на SO об аналогичных ошибках, например:

1. «Магазин не найден» при использовании расширения Redux Chrome "
2. «Как добавить Redux DevTools Extension в мое хранилищеact-redux?»

Большинство ответов на эти вопросы связаны с указанием правильных переменных, например, с использованием window.__REDUX_DEVTOOLS_EXTENSION__вместо devToolsExtension (после обновления расширения) или установки npm пакета redux-devtools-extension.

Моя проблема в другом - если я запускаю свое приложение React (в режиме разработки) внеРасширение Chrome (иначе, не через страницу options в Расширении Chrome), я обнаружил, что расширение Redux DevTools работает для меня нормально, однако, как я уже упоминал ранее, когда я запускаю приложение React изнутри страницы Расширения Chrome options, тамРасширение dux DevTools не может найти магазин.

Вот мой файл index.js, который я использую на странице options:

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

import App from './App';
import rootReducer from './store/reducers/root';

// 
const composeEnhancers = process.env.NODE_ENV === 'development'
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    : null
        || compose;

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

const app = (
    <Provider store={store}>
        <App />
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

Я считаю, что ошибка связана с тем,что я запускаю приложение React на странице options моего расширения Chrome.Я обнаружил, что window.__REDUX_DEVTOOLS_EXTENSION__ - это undefined со страницы Chrome Extension options, но эта переменная window.__REDUX_DEVTOOLS_EXTENSION__ видна и доступна на обычных страницах.Есть ли проверенный и проверенный способ сделать window.__REDUX_DEVTOOLS_EXTENSION__ доступным на странице options расширения Chrome?

Answer 1

В этом случае вы можете использовать Remote Redux Devtools .

Добавьте это в свое создание магазина (yarn add --dev remote-redux-devtools):

import devToolsEnhancer from "remote-redux-devtools";

const store = createStore(
  popupReducer,
  devToolsEnhancer({
    hostname: "localhost",
    port: 8000,
    realtime: true
  }) 
);

Вам также понадобитсяудаленный сервер, я пошел с локальным:

yarn add --dev remotedev-server
cd /node_modules/.bin/
remotedev --port=8000

Теперь вы можете подключиться и контролировать свой магазин, используя расширение chrome , нажмите кнопку Remote, перейдите в настройки и нажмите "Используйте пользовательский (локальный) сервер "там, и вы должны увидеть свой магазин в режиме реального времени.