How to use redux-devtools - 10 common examples

// Sync dispatched route actions to the history
  const sagaMiddleware = createSagaMiddleware();
  const middleware = [sagaMiddleware];

  let finalCreateStore;
  if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) {
    // const reactotronEnhancer = createReactotronEnhancer(Reactotron)
    const { persistState } = require('redux-devtools');
    const DevTools = require('../core/DevTools');
    finalCreateStore = compose(
      // reactotronEnhancer,
      applyMiddleware(...middleware),
      window.devToolsExtension
        ? window.devToolsExtension()
        : DevTools.instrument(),
      persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
    )(_createStore);
  } else {
    finalCreateStore = applyMiddleware(...middleware)(_createStore);
  }

  const reducer = require('./reducers/index');
  const store = finalCreateStore(reducer, Immutable.fromJS(data));

  // Object.values(sagas).forEach(saga => sagaMiddleware.run(user));
  sagaMiddleware
    .run(rootSaga)
    .done.catch(err => console.log('[SAGA-ERROR]', err));

  if (__DEVELOPMENT__ && module.hot) {
    module.hot.accept('./reducers/index', () => {
      store.replaceReducer(require('./reducers/index'));

// top entry
import App from '../component/App';
import Admin from '../component/Admin';

// Sync dispatched route actions to the history
const reduxRouterMiddleware = syncHistory(browserHistory);
const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware)(createStore);


const enhancer = compose(
  applyMiddleware(
    thunkMiddleware,
    loggerMiddleware
  ),
  DevTools.instrument(),
  persistState(
    window.location.href.match(
      /[?&]debug_session=([^&]+)\b/
    )
  )
);

const store = createStore(
  reducer,
  enhancer
)
// Required for replaying actions from devtools to work
reduxRouterMiddleware.listenForReplays(store)

const routes = {
  path: '/',
  component: App,

import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import { routerReducer, syncHistoryWithStore, routerMiddleware } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'

import * as reducers from './reducers'
import { App, Home, Foo, Admin, Login } from './components'
import { userIsAuthenticated, userIsAdmin, userIsNotAuthenticated } from './auth'

const baseHistory = browserHistory
const routingMiddleware = routerMiddleware(baseHistory)
const reducer = combineReducers(Object.assign({}, reducers, {
  routing: routerReducer
}))

const DevTools = createDevTools(
  
    
  
)

const enhancer = compose(
  // Middleware you want to use in development:
  applyMiddleware(thunkMiddleware, routingMiddleware),
  DevTools.instrument()
)

// Note: passing enhancer as the last argument requires redux@>=3.1.0
const store = createStore(reducer, enhancer)
const history = syncHistoryWithStore(baseHistory, store)

import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

// createDevTools takes a monitor and produces a DevTools component
const DevTools = createDevTools(
  // Monitors are individually adjustable with props.
  // Consult their repositories to learn about those props.
  // Here, we put LogMonitor inside a DockMonitor.
  // Note: DockMonitor is visible by default.
  
    
  
);

export default DevTools;

import React from 'react'
import { render } from 'react-dom'

// Exported from redux-devtools
import { createDevTools } from 'redux-devtools'

// Monitors are separate packages, and you can make a custom one
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'
import SliderMonitor from 'redux-slider-monitor'

// createDevTools takes a monitor and produces a DevTools component
const DevTools = createDevTools(
  
    
    
  
)

function showDevTools (store) {
  const popup = window.open(null, 'Redux DevTools', 'menubar=no,location=no,resizable=no,scrollbars=no,status=no,width=400px')
  // Reload in case it already exists
  popup.location.reload()

  setTimeout(() => {

/* eslint-disable import/no-extraneous-dependencies */
/* Redux devtools. Is not a part of the prod bundle */
import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

// createDevTools takes a monitor and produces a DevTools component
const DevTools = createDevTools(
  // Monitors are individually adjustable with props.
  // Consult their repositories to learn about those props.
  // Here, we put LogMonitor inside a DockMonitor.
  
    
  ,
);

// 参考 https://github.com/gaearon/redux-devtools/blob/master/docs/Walkthrough.md
import React from 'react'
import { createDevTools } from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'

// createDevTools takes a monitor and produces a DevTools component
const DevTools = createDevTools(
  // Monitors are individually adjustable with props.
  // Consult their repositories to learn about those props.
  // Here, we put LogMonitor inside a DockMonitor.
  // Note: DockMonitor is visible by default.
  
    
  
)

export default DevTools

export const createStoreWithMiddleware = () => {
    const middleware = applyMiddleware(apiMiddleware)

    if (__DEV__) {
        const logSlowReducers = require('app/utils/devLogSlowReducers')
        const reducer = combineReducers(logSlowReducers(reducers))

        const { devTools, persistState } = require('redux-devtools')

        const finalCreateStore = compose(
            middleware,
            devTools(),
            persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
        )(createStore)

        const store = finalCreateStore(reducer)

        if (module.hot) {  // Enable Webpack hot module replacement for reducers
            module.hot.accept('app/reducers', () => {
                const nextRootReducer = combineReducers(
                    logSlowReducers(require('app/reducers/index'))
                )
                store.replaceReducer(nextRootReducer)
            })
        }

        return store
    } else {

import {createStore, applyMiddleware, combineReducers, compose} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {devTools, persistState} from 'redux-devtools';
import * as reducers from '../reducers/index';

let createStoreWithMiddleware;

// Configure the dev tools when in DEV mode
if (__DEV__) {
  createStoreWithMiddleware = compose(
    applyMiddleware(thunkMiddleware),
    devTools(),
    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
  )(createStore);
} else {
  createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
}

const rootReducer = combineReducers(reducers);

export default function configureStore(initialState) {
  return createStoreWithMiddleware(rootReducer, initialState);
}

import createLogger from 'redux-logger';
import { compose, createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { devTools, persistState } from 'redux-devtools';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
import App from './containers/App';
import todoApp from './reducers';

const loggerMiddleware = createLogger();

const createStoreWithMiddleware = compose(
  applyMiddleware(
    thunkMiddleware, // lets us dispatch() functions
    loggerMiddleware // neat middleware that logs actions
  ),
  devTools()
)(createStore);

const store = createStoreWithMiddleware(todoApp);

render(
  <div>
    
      
    
    
      
    
  </div>,
  document.getElementById('root')
);