How to use redux-devtools-extension - 10 common examples

import 'babel-polyfill';
import { domDelta, observeDelta } from 'brookjs';
import { applyMiddleware, combineReducers, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { init } from './actions';
import {} from './deltas';
import { el, view } from './dom';
import {} from './reducers';
import { selectProps } from './selectors';

const { __INITIAL_STATE__ } = global;

const compose = composeWithDevTools({
    name: '{{name}}'
});

const enhancer = compose(applyMiddleware(observeDelta(
    // Register your deltas here
    domDelta({ el, view, selectProps })
)));

const reducer = combineReducers({
    // Register your reducers here
});

const store = createStore(reducer, __INITIAL_STATE__, enhancer);

store.dispatch(init());

export default (initialState, history) => {
  const middleware = [environment.isDevelopment ? reduxFreeze : null, thunk, routerMiddleware(history), errorToastMiddleware()].filter(Boolean);

  const store = createStore(rootReducer(history), initialState, composeWithDevTools(applyMiddleware(...middleware)));

  // store.subscribe(() => console.log(store.getState()));

  return store;
};

done: true,
  recurrence: 'Daily',
  rating: 3
};

const initState: JsonFormsState = {
  jsonforms: {
    cells: materialCells,
    renderers: materialRenderers
  }
};

const rootReducer: Reducer = combineReducers({
  jsonforms: jsonformsReducer()
});
const store = createStore(rootReducer, initState, devToolsEnhancer({}));
store.dispatch(Actions.init(data, schema, uischema));

// Register custom renderer for the Redux tab
store.dispatch(Actions.registerRenderer(ratingControlTester, RatingControl));

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

import createHistory from "history/createBrowserHistory";
import { routerMiddleware } from "react-router-redux";
import { notificationUpdater, successDismisser } from "reducers/notifications";
import { operationsTracker } from "reducers/operations";
import { applyMiddleware, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunkMiddleware from "redux-thunk";
import reducers from "./reducers";

export const history = createHistory();

const store = createStore(
  reducers,
  // TODO: only compose with devtools in when ENV === 'dev'
  composeWithDevTools(   // makes the store available to the Chrome redux dev tools
    applyMiddleware(
      thunkMiddleware,
      operationsTracker,
      notificationUpdater,
      successDismisser(15000),
      routerMiddleware(history)
    ),
  ),
);

// A store for testing purposes
export const mockStore = () => createStore(
  reducers,
  applyMiddleware(
    thunkMiddleware,
    operationsTracker,

export function createReduxStore (name, initialState = {}) {
  const sagaMiddleware = createSagaMiddleware()
  const middleware = composeWithDevTools(applyMiddleware(sagaMiddleware))
  let store = createStore(reducers, initialState, middleware)
  sagaMiddleware.run(rootSaga)
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers', () => {
      const nextRootReducer = require('./reducers/index')
      store.replaceReducer(nextRootReducer)
    })
  }
  return store
}

import React from "react";
import ReactDOM from "react-dom";
import { applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunkMiddleware from "redux-thunk";
import { Provider, useRedux, createStore, setStore } from "hooks-for-redux";

// store.js
const store = setStore(
  createStore({}, composeWithDevTools(applyMiddleware(thunkMiddleware)))
);

// toggleState.js
const [useToggle, { toggleSwitch }] = useRedux("toggle", false, {
  toggleSwitch: state => !state
});

// Toggle.js
const Toggle = () => {
  const toggle = useToggle();
  return (
    <div>
      <div>{JSON.stringify(toggle)}</div>
      <input value="{toggle}" type="checkbox">
    </div>
  );

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

import rootReducer from './reducers';

// Store setup
const middleware = applyMiddleware(thunkMiddleware);

const store = createStore(rootReducer, {}, composeWithDevTools(middleware));

export default store;

initialState = undefined,
) {
  const {
    routerEnhancer,
    routerMiddleware,
  } = routerForBrowser({
    // The configured routes. Required.
    routes,
    // The basename for all routes. Optional.
    // basename: '/'
  });

  middlewares.unshift(routerMiddleware);
  enhancers.unshift(routerEnhancer);

  const createStoreWithMiddleware = composeWithDevTools(
    applyMiddleware(
      ...middlewares,
    ),
    ...enhancers,
  )(reduxCreateStore);

  const store = createStoreWithMiddleware(reducers, initialState);
  return store;
}

normalizedInitialState.teams.items = normalize(initialState.teams.items, [schemas.team]);
  normalizedInitialState.users.items = normalize(initialState.users.items, [schemas.user]);
  normalizedInitialState.restaurants.items.entities.votes = normalizedInitialState.restaurants.items.entities.votes || {};

  const reducers = generateReducers(reducerMaps, normalizedInitialState);

  const helpers = createHelpers(helpersConfig);
  const middleware = [thunk.withExtraArgument(helpers)];

  let enhancer;

  if (__DEV__) {
    middleware.push(createLogger());

    // https://github.com/zalmoxisus/redux-devtools-extension#14-using-in-production
    const composeEnhancers = composeWithDevTools({
      // Options: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#options
      name: `${name}@${version}`,
    });

    // https://redux.js.org/docs/api/applyMiddleware.html
    enhancer = composeEnhancers(applyMiddleware(...middleware));
  } else {
    enhancer = applyMiddleware(...middleware);
  }

  const store = createStore(
    combineReducers(reducers),
    normalizedInitialState,
    enhancer
  );

const createMiddleware = (thunkArguments: object) => {
  const middlewares = [thunk.withExtraArgument(thunkArguments), createLoggerMiddleware()];

  // Note: Redux DevTools will only be applied when NODE_ENV is NOT production
  // https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/developmentOnly.js
  return composeWithDevTools(applyMiddleware(...middlewares));
};