How to use the redux-devtools-extension.composeWithDevTools function in redux-devtools-extension

To help you get started, we’ve selected a few redux-devtools-extension examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github daostack / alchemy / src / configureStore.ts View on Github external
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,
github ericwooley / react-nativeish / src / redux / store.js View on Github external
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
}
github generalui / hooks-for-redux / examples / tiny-toggle / src / index.js View on Github external
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>
  );
github fccoelho7 / AnduxJS / src / store.js View on Github external
import { createStore } from 'redux';
import { combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import getAllReducers from './utils/getAllReducers';
import pagesIndex from './view/pages/index';

const reducers = getAllReducers(pagesIndex);

export default createStore(
  combineReducers(reducers),
  composeWithDevTools(applyMiddleware(thunk))
);
github Xavyr / react-redux-boilerplate / client / src / store.js View on Github external
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducers  from './reducers/combinedReducers.js';


//the store, enhanced with thunk middleware to allow for async action in redux.
const store = createStore(
	reducers,
  composeWithDevTools(
    applyMiddleware(thunk)
  )
);


export default store;
github MageStudio / Mage-Studio / pages / lib / store.js View on Github external
const projectid = config.data.project;

        if (projectid) {
            project = await axios(buildUrl(baseUrl, `${PROJECTS_URL}/${projectid}`));
            assets = await axios(buildUrl(baseUrl, getAssetsUrl(projectid)));
        }

        state = {
            ...state,
            config: config.data,
            project: project.data,
            assets: assets.data
        };
    }

    return createStore(reducers, state, composeWithDevTools(applyMiddleware(thunkMiddleware)));
}
github ryandrewjohnson / react-localize-redux / demo / src / index.js View on Github external
getReduxStore() {
    return createStore(combineReducers({ 
      localize: localizeReducer
    }), composeWithDevTools());
  }
github Codeminer42 / cm42-central / app / assets / javascripts / store / index.js View on Github external
UrlService,
  Search
};

const reducer = combineReducers({
  project,
  projectBoard,
  users,
  stories,
  history,
  pastIterations,
  notifications
});

const store = createStore(
  reducer, composeWithDevTools(
    applyMiddleware(
      thunk.withExtraArgument(dependencies)
    )
  )
);

export default store;
github mariocoski / express-typescript-react-redux-universal / client / src / universal / redux / store.js View on Github external
export default (history) => {
    const historyMiddleware = routerMiddleware(history);
    const store = createStore(combineReducers({
      ...reducers,
      router: routerReducer
    }), composeWithDevTools(
      applyMiddleware(historyMiddleware,thunk)
    ));

    if (module.hot) {
       module.hot.accept('./reducers', () => {
         const nextReducers = require('./reducers');
         const rootReducer = combineReducers({
           ...nextReducers,
           router: routerReducer
         });
         store.replaceReducer(rootReducer);
       });
    }
    return store;
  }