redux devtools extension

️ ️ ️ ️ ️ ️

Этот репозиторий больше не является домом для расширения redux-devtools-extension. Новый дом — https://github.com/reduxjs/redux-devtools. Пожалуйста, оставляйте свои вопросы и запросы туда.

️ ️ ️ ️ ️ ️

Расширение Redux DevTools

Установка

1. Для Хрома

• из Интернет-магазина Chrome;
• или загрузите extension.zip из последних выпусков, разархивируйте, откройте URL-адрес chrome://extensions и включите режим разработчика слева вверху, а затем нажмите; при Load Unpacked и выберите извлеченную папку для использования.
• или создайте его с помощью npm i && npm run build:extension и загрузите папку расширения ./build/extension ;
• или запустите его в режиме разработки с помощью npm i && npm start и загрузите папку расширения ./dev .

2. Для Firefox

• из дополнений Mozilla;
• или создайте его с помощью npm i && npm run build:firefox и загрузите папку расширения ./build/firefox (просто выберите файл из каталога).

3. Для электрона

• просто укажите REDUX_DEVTOOLS в electron-devtools-installer .

4. Для других браузеров и небраузерной среды.

• используйте remote-redux-devtools .

Использование

Обратите внимание, что, начиная с версии 2.7, window.devToolsExtension был переименован в window.__REDUX_DEVTOOLS_EXTENSION__ __/ window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ .

1. С Редуксом

1.1 Базовый магазин

Для базового хранилища Redux просто добавьте:

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

Обратите внимание, что аргумент preloadedState не является обязательным в createStore Redux.

Для универсальных («изоморфных») приложений добавьте к нему префикс typeof window !== 'undefined' && .

 const composeEnhancers = ( typeof window !== 'undefined' && window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ) || compose ;

Для TypeScript используйте пакет npm redux-devtools-extension , который содержит все определения, или просто используйте (window as any) (пример см. в разделе «Рецепты»).

 const composeEnhancers = ( window as any ) . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose ;

Если ESLint настроен так, чтобы не разрешать использование символа подчеркивания, оберните его следующим образом:

 + /* eslint-disable no-underscore-dangle */
  const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
+ /* eslint-enable */

Примечание . Для передачи Enhancer в качестве последнего аргумента требуется redux@>=3.1.0 . Для более старых версий примените его, как здесь или здесь. Не смешивайте старый API Redux с новым.

Вам не нужно устанавливать npm redux-devtools при использовании расширения (это другая библиотека).

1.2 Расширенная настройка магазина

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

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

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

Обратите внимание: когда расширение не установлено, мы используем Redux Compose здесь.

Чтобы указать параметры расширения, используйте его следующим образом:

 const composeEnhancers =
  typeof window === 'object' &&
  window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ( {
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    } ) : compose ;

const enhancer = composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ;
const store = createStore ( reducer , enhancer ) ;

Более подробную информацию смотрите в посте.

1.3 Используйте пакет redux-devtools-extension из npm

Чтобы упростить задачу, нужно установить пакет npm:

 npm install --save redux-devtools-extension

и использовать так:

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;

const store = createStore ( reducer , composeWithDevTools (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

Чтобы указать параметры расширения:

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;

const composeEnhancers = composeWithDevTools ( {
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
} ) ;
const store = createStore ( reducer , /* preloadedState, */ composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

В ваш пакет добавлено всего несколько строк кода.

Если вы не включаете другие усилители и промежуточные программы, просто используйте devToolsEnhancer :

 import { createStore } from 'redux' ;
import { devToolsEnhancer } from 'redux-devtools-extension' ;

const store = createStore ( reducer , /* preloadedState, */ devToolsEnhancer (
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
) ) ;

1.4 Использование в производстве

Полезно также включить расширение в производство. Обычно вы можете использовать его для разработки.

Если вы хотите ограничить это, используйте redux-devtools-extension/logOnlyInProduction :

 import { createStore } from 'redux' ;
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction' ;

const store = createStore ( reducer , /* preloadedState, */ devToolsEnhancer (
  // options like actionSanitizer, stateSanitizer
) ) ;

или с промежуточным программным обеспечением и усилителями:

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction' ;

const composeEnhancers = composeWithDevTools ( {
  // options like actionSanitizer, stateSanitizer
} ) ;
const store = createStore ( reducer , /* preloadedState, */ composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

Вам нужно будет добавить 'process.env.NODE_ENV': JSON.stringify('production') в конфигурацию вашего Webpack для производственного пакета (чтобы завидовать). Если вы используете create-react-app , оно уже сделает это за вас.

Если вы уже проверяете process.env.NODE_ENV при создании хранилища, включите redux-devtools-extension/logOnly для производственной среды.

Если вы не хотите разрешать расширение в производстве, просто используйте redux-devtools-extension/developmentOnly .

Более подробную информацию смотрите в статье.

1.5 Для React Native, гибридных, настольных и серверных приложений Redux

Для React Native мы можем использовать react-native-debugger , который уже включает тот же API с расширением Redux DevTools Extension.

Для большинства платформ включите усилитель хранилища Remote Redux DevTools , а в контекстном меню расширения выберите «Открыть Remote DevTools» для удаленного мониторинга.

2. Без редукса

Дополнительные сведения о том, как использовать расширение с любой архитектурой, см. в разделе «Интеграции» и в блоге.

Документы

• Опции (аргументы)
• Методы (расширенный API)
• Часто задаваемые вопросы
• Функции
  • Отслеживание вызовов действий
• Поиск неисправностей
• Статьи
• Видео
• Обратная связь

Демо

Живые демонстрации использования расширения с:

• Прилавок
• ТодоMVC
• Редукс-форма
• Реагировать на тетрис
• Коллекция книг (магазин Angular ngrx)

Также см. папку ./examples .

Сторонники

Поддержите нас ежемесячным пожертвованием и помогите нам продолжить нашу деятельность. [Стать спонсором]

Спонсоры

Станьте спонсором и разместите свой логотип в нашем README на Github со ссылкой на ваш сайт. [Стать спонсором]

Лицензия

Массачусетский технологический институт

Создано

Если вам это нравится, подписывайтесь на @mdiordiev в твиттере.