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

* @format
 */

import {createStore, applyMiddleware} from 'redux';
import {composeWithDevTools} from 'remote-redux-devtools';
import thunkMiddleware from 'redux-thunk';
import {enableBatching, batchDispatchMiddleware} from 'redux-batched-actions';
import reduxUnhandledAction from 'redux-unhandled-action';
import {createLogger} from 'redux-logger';

import reducer from '../../reducers';
import getAPIMiddleware from '../getAPIMiddleware';
import throwOnAsyncErrorMiddleware from '../throwOnAsyncErrorMiddleware';
// import persistEnhancer from './persistEnhancer';

const composeEnhancers = composeWithDevTools({realtime: true});

const callback = action => {
  console.error(
    `${JSON.stringify(action)}
didn't lead to creation of a
new state object`,
  );
};

const logger = createLogger({
  diff: true,
});

// $FlowFixMe
export default function configureStore(API) {
  const callAPIMiddleware = getAPIMiddleware(API);

export default function configureStore(reducer, saga, initialState) {
  const composeEnhancers = composeWithDevTools({
    realtime: false,
    actionsBlacklist: [
      "RECEIVE_TRACE",
      "SCOPE",
      "DECLARE_VARIABLE",
      "ASSIGN",
      "ADVANCE",
      "SAVE_STEPS",
      "BEGIN_STEP",
      "NEXT"
    ],
    stateSanitizer: _state => ({
      // session: state.session,
      // context: state.context,
      // evm: state.evm,
      // solidity: state.solidity,

return reducer(state, action);
  }
  // Note how we can purge sensitive data without hard reload easily.
  const stateWithoutSensitiveData = {
    app: state.app,
    user: undefined,
    location: state.location,
    trashpile: state.trashpile,
  };
  return reducer(stateWithoutSensitiveData, action);
};

export default createStore(
  resetStateOnSignOutReducer(rootReducer),
  undefined,
  composeWithDevTools(applyMiddleware(thunk), autoRehydrate()),
);

export default function configureStore(initialState) {
  const store = createStore(
    reducer,
    initialState,
    composeWithDevTools(
      applyMiddleware(thunk),
    )
  );

  if (module.hot) {
    // Enable hot module replacement for reducers
    module.hot.accept(() => {
      const nextRootReducer = require('../reducers/index').default;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
};

*/
    let finalMiddlewares: any = middlewares.concat(sagaMiddleware, reduxSagaMiddleware);

    if (process.env.NODE_ENV !== 'production') {
        // @ts-ignore
        if (window.__REDUX_DEVTOOLS_EXTENSION__) {
            // redux dev tool extension for chrome
            finalMiddlewares = compose(
                applyMiddleware(...finalMiddlewares),
                // @ts-ignore
                window.__REDUX_DEVTOOLS_EXTENSION__(reduxDevToolOptions),
            );
        } else {
            // remote redux dev tool
            const composeWithDevTools = require('remote-redux-devtools').composeWithDevTools;
            const composeEnhancers = composeWithDevTools(reduxDevToolOptions);
            finalMiddlewares = composeEnhancers(applyMiddleware(...finalMiddlewares));
        }
    } else {
        finalMiddlewares = applyMiddleware(...finalMiddlewares);
    }

    app.store = createStore(makeRootReducer({}, {}), initialState, finalMiddlewares);
    app.store.asyncReducers = {};
    app.store.matrixReducers = {};

    app.register = register.bind(app);
    app.registerModel = registerModel.bind(app);
    app.unRegisterModel = unRegisterModel.bind(app);
    app.runSaga = sagaMiddleware.run;

    return app;

import { wrapStore } from "react-chrome-redux";
import { applyMiddleware, createStore } from "redux";
import createSagaMiddleware from "redux-saga";

import { composeWithDevTools } from "remote-redux-devtools";
import { middleware } from "../router/middleware";
import reducer from "./reducers";
import sagas from "./sagas";

const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, middleware];
let enhancers = applyMiddleware(...middlewares);

if (process.env.NODE_ENV === "development") {
  const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });
  enhancers = composeEnhancers(
    applyMiddleware(...middlewares)
    // other store enhancers if any
  );
}

export const store = createStore(
  reducer,
  /* preloadedState, */
  enhancers
);

sagaMiddleware.run(sagas);
wrapStore(store, { portName: "HLS_DOWNLOADER" });

const enhanceMiddleware = (...middleware) => {
  const remoteDevEnabled =
    process.env.REMOTE_DEV_SERVER && process.env.REMOTE_DEV_SERVER !== 'false';

  // REMOTE_DEV_SERVER is useful if we want to just run the application without jkkjj
  if (process.env.NODE_ENV === 'development' && remoteDevEnabled) {
    // eslint-disable-next-line import/no-extraneous-dependencies, global-require
    const { composeWithDevTools } = require('remote-redux-devtools');
    // 'remotedev' is a container managed by docker-compose
    const composeEnhancers = composeWithDevTools({
      realtime: true,
      hostname: 'remotedev',
      port: 9090,
    });
    return composeEnhancers(applyMiddleware(...middleware));
  }

  return applyMiddleware(...middleware);
};

electronStoreOpts: {
    encryptionKey: 'secret encryption key'
  }
});

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['txs']
};

// In development, send Redux actions to a local DevTools server
// Note: run and view these DevTools with `yarn dev:tools`
let debugWrapper = data => data;
if (process.env.NODE_ENV === 'development') {
  debugWrapper = composeWithDevTools({
    realtime: true,
    port: 8000,
    maxAge: 100
  });
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default function configureReduxStore() {
  const store = createStore(
    persistedReducer,
    debugWrapper(applyMiddleware(thunk, forwardToRenderer))
  );
  persistStore(store);
  replayActionMain(store);
  return store;

import { createStore, applyMiddleware } from 'redux'
// import { persistStore } from 'redux-persist'
import { composeWithDevTools } from 'remote-redux-devtools'
import thunk from 'redux-thunk'
import persistedReducer from './rootReducer'

// In development, send Redux actions to a local DevTools server
// Note: run and view these DevTools with `yarn dev:tools`
let debugWrapper = data => data
if (process.env.NODE_ENV === 'development') {
  debugWrapper = composeWithDevTools({
    realtime: true,
    port: 8000,
    maxAge: 100
  })
}

export default function configureStore() {
  const store = createStore(
    persistedReducer,
    debugWrapper(applyMiddleware(thunk))
  )
  // const persistor = persistStore(store)

  if (module.hot) {
    module.hot.accept('./rootReducer', () => {
      const nextPersistedReducer = require('./rootReducer').default // eslint-disable-line

let composeEnhancers = compose
declare const __DEV__: boolean

if (__DEV__) {
  // tslint:disable-next-line:no-var-requires
  const { composeWithDevTools } = require('remote-redux-devtools')
  const config = {
      // realtime: true,
      name: Platform.OS,
      hostname: 'localhost',
      actionsBlacklist: ['player/currentTime', '🐸🐸🐸', 'download/progress', 'player/slideTime'],
      port: 5678
  }

  composeEnhancers = composeWithDevTools(config)
}

const sagaMiddleware = createSagaMiddleware()

const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware)
)

export default function configureStore (initialState: any) {
  const store = createStore(
    rootReducer,
    initialState,
    enhancer
  )
  sagaMiddleware.run(sagas)
  return store