reduxjs / redux-devtools Goto Github PK

I found that when implementing shouldComponentUpdate, an immutable value in this.props doesn't have the same identity as that value in nextProps when expected. You end up comparing 2 different Immutable maps with the same attributes.

This happens when an action has updated that component's bit of state earlier then some other unrelated action is dispatched, possibly one that does nothing. The component is comparing a reference to that bit of state it had following the first action with the same following the second action. They should have the same identity since the second action's didn't touch that bit of state.

I wrote a failing spec that reproduces the problem. I found that removing devTools caused it to pass.

https://gist.github.com/davidnorth/b6c5991756a7fdaf4d81

Also, I don't know if it's related, but since upgrading to 1.1.1 I no longer see anything of the state in dev tools, only the actions, where previously I saw the raw immutable object representation.

This might be to late, as it is a braking change, but I'd like some opinions.

With the addition of timestamps we saw that devtools and it's api had to be changed.

Shouldn't it be possible for monitors to "annotate" lifted actions with arbitrary values/properties (like skipped/timestamp), without the need for a change of devtools, let's say for "collapsed"?

why not have lifted action be something like:

{
  actions: the_original_action,
  skipped: false,
  timestamp: 123456,
  collapsingMonitor: {
    collapsed: true
  }
}

or:
stagedActions: [.....],
stagedActionsState: [{skipped: false, timestamp: 12345, newStates: 'xyz'}, .....]

And then probably, updateStagedAction(index/liftedaction, newStagedActionState)?

I know, changing skipped on a lifted-property / statedActionState object, will be more complicated, but I think it might be worth to not have to change devtools every time we need new lifted action states.

Here's the relevant code, When I shut down my mock server, and try to delete a user twice

//actions
export const deleteUser = user => (dispatch, getState) => {
  const { api } = getState();

  dispatch({
    type: DELETE_USER,
    payload: {
      user,
    },
  });

  return (async () => {
    try {
      await api.post('/user/delete', {uuid: user.uuid});
      return dispatch(deletedUserOk(user));
    } catch (err) {
      return dispatch(deletedUserFail(err));
    }
  })();


};

export const deletedUserOk = user => ({
  type: DELETED_USER_OK,
  payload: { user },
});
export const deletedUserFail = error => ({
  type: DELETED_USER_FAIL,
  error: true,
  payload: error,
});


//reducers


  [DELETE_USER](state, action) {
    const { user } = action.payload;

    const index = state.users.indexOf(user);

    return update(state, {
      users: {
        [index]: {
          deleting: {$set: true},
        },
      },
    });
  },

  [DELETED_USER_OK](state, action) {
    const { user } = action.payload;

    const find = user => {
      for (let u of state.users) {
        if (u.uuid === user.uuid) {
          return u;
        }
      }
    };

I don't have a reducer for DELETED_USER_FAIL but I don't see how that would matter. This is the error message:

TypeError: Cannot read property 'deleting' of undefined
    at update (eval at <anonymous> (http://localhost:3000/static/bundle.js:4724:2), <anonymous>:160:34)
    at update (eval at <anonymous> (http://localhost:3000/static/bundle.js:4724:2), <anonymous>:160:22)
    at update (eval at <anonymous> (http://localhost:3000/static/bundle.js:4724:2), <anonymous>:160:22)
    at Object._refluxCreateReducer.createReducer._createReducer.(anonymous function) [as DELETE_USER] (eval at <anonymous> (http://localhost:3000/static/bundle.js:4736:2), <anonymous>:47:10)
    at reducer (eval at <anonymous> (http://localhost:3000/static/bundle.js:4622:2), <anonymous>:6:35)
    at eval (eval at <anonymous> (http://localhost:3000/static/bundle.js:2294:2), <anonymous>:94:22)
    at eval (eval at <anonymous> (http://localhost:3000/static/bundle.js:2300:2), <anonymous>:15:19)
    at Array.reduce (native)
    at Object.mapValues [as default] (eval at <anonymous> (http://localhost:3000/static/bundle.js:2300:2), <anonymous>:14:27)
    at combination (eval at <anonymous> (http://localhost:3000/static/bundle.js:2294:2), <anonymous>:93:49)

Ok so it seems that not returning a new identical object fixes this, ie:

[DELETE_USER](state, action) {
    const { user } = action.payload;

    if (user.deleting) {
      return state;
    }

    const index = state.users.indexOf(user);

    return update(state, {
      users: {
        [index]: {
          deleting: {$set: true},
        },
      },
    });
  },

Currently, DebugPanel passes several styles down to the Monitor in use as an artifact of the original demo put together by @gaearon. Since new Monitors are being actively developed, and I believe we should be encouraging a consistent approach to syntax like:

<DebugPanel top right bottom>
   <DevTools store={store} monitor={LogMonitor} />
</DebugPanel>

...where LogMonitor is subbed out by the developer for their preferred Monitor.

To this effect, I suggest that DebugPanel be re-tooled to be concerned only with it's positioning on screen and anchoring (it's current properties remain intact, and also hotkeys for enabling / disabling visibility.

This frees Monitors up to be singularly focused on their own appearance and behaviours within the DebugPanel, and keeps the general DX with DevTools consistent irrespective of the Monitor being used. Diff-Monitor is guilty of re-implementing some of these as we didn't want to write overrides to the DebugPanel styles coming down, so I would be the first to jump onboard with a PR if this suggestion seems valid.

Do a lot of items on examples/todomvc or write some forms with a form helper like redux-form, and redux-devtools starts to slow down. Looking at Chrome profiles a lot of time (90%?) seems to be used on React proptype validation. I wonder if removing those would make sense?

We should have an official online demo, just like http://lapanoid.github.io/redux-devtools-gentest-plugin/.

@Lapanoid Is this something you'd like to contribute? Basically we just want to run the TodoMVC with monitor just like in your repo.

<DevTools> accepts a monitor prop. The monitor that ships with react-devtools is called LogMonitor but it's just a React component. You can build your own instead.

I challenge you to implement a really different monitor than what we ship with. Some crazy ideas:

• A slider that lets you jump between computed states just by dragging it
• An in-app layer that shows the last N states right in the app (e.g. for animation)
• A time machine like interface where the last N states of your app reside on different Z layers

LogMonitor propTypes should give you some ideas about the stuff injected by DevTools:

static propTypes = {
  // Stuff you can use
  computedStates: PropTypes.array.isRequired,
  currentStateIndex: PropTypes.number.isRequired,
  stagedActions: PropTypes.array.isRequired,
  skippedActions: PropTypes.object.isRequired,

  // Stuff you can do
  reset: PropTypes.func.isRequired,
  commit: PropTypes.func.isRequired,
  rollback: PropTypes.func.isRequired,
  sweep: PropTypes.func.isRequired,
  toggleAction: PropTypes.func.isRequired, // ({ index })
  jumpToState: PropTypes.func.isRequired // ({ index })
}

This data (and functions) will be injected into your monitor by the dev tools. Feel free to use (or ignore) any of them, and let me know if something important you need for a custom monitor is missing.

There are some cases where a reducer (or middleware) may want to skip handling an action which is being replayed. The main case that comes to mind is that of 'transient' state, state that only makes sense in its contemporary environment.

It would be nice if we could detect if an action is being replayed, thus enabling transient state to play well with devtools.

How to achieve this is tricky and as far as I can see all options are inelegant:

1. Add some meta to the replayed action object.
2. Set a global variable, like process.env.REDUX_REPLAY = true
3. Add a isReplay() method to the store. Then middleware can call isReplay and act accordingly.

edit: updated options, did not realize all actions are objects by the time they hit the reducer.

Thoughts?

The area that is clickable for the tree arrow is small and hard to click.
The area around the triangle itself need to be clickable.

Replacing margins with paddings usually does the trick, but in this case padding enlarges the arrow.
A solution is to either wrap the arrow with a clickable div or to redo it in svg, it is simple either ways.

React has perf method to measure wasted renders. Idea: a monitor that calls React.addons.Perf.start() and stop() before and after replaying staged actions, and shows the results in table. Every time you hot reload components, it would do this again, so you see how your changes are affecting performance.

I'm not sure it's easy to implement as is, because React Hot Loader won't tell you if hot reload has happened when the component handled it, but it's something we want to consider in the future.

Thansk @winkler1 for the tip.

I've been trying to get reducer hot swapping working all day, to no avail. This is most recent attempt:

https://github.com/donabrams/react-redux-universal-hot-example/blob/master/src/reducers/test.js#L10

This is the only (non-actionable) console message I got:

[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
log-apply-result.js?d762:13
[HMR]  - 272

Am I doing something wrong? Is there something I need to do to support reducer hot reloading as in gaearon/react-hot-loader#163?

I have started work on a Chrome extension wrapper for redux-devtools. I wanted to create this issue to make sure we don't have multiple people working on it at the same time.

I created it in a folder in this repo, but we could easily move it to another repo after it's finished.

WIP:
https://github.com/taylorhakes/redux-devtools

A problem I've noticed in the UI is that everything feels very ad hoc, and components don't really consider each other. The changes in #48 helped organize what's already built, but didn't do much to anticipate new features.

After chatting with @gaearon I learned that there's still a lot of cool stuff yet to be added, e.g., state scrubbing, save & load, granular commit/sweep actions, etc. So in an effort to prevent some painful redesigns in the future, I tried thinking of a few simple ideas that'll help organize what's in the devtools UI now, and what might come later.

Doc • SVG • Original

A few questions I assumed would be asked:

Why not keep top-level events expanded?

The current implementation makes it hard to manipulate a lot of items at once, since just a few of them fill up the view. This isn't a huge problem at the moment, but if concepts like granular control of global actions, state scrubbing, or filtering are introduced the problem will grow.

Why action drawers?

Since everything is ad hoc at the moment, the UI keeps running out of room. The same effect could be achieved with a drop down or similar, but a drawer for event actions create consistency between the global actions. And since many of the actions would actually be the same (e.g., delete, commit, etc.) you can just use the same component and change the content based on context.

Why icons for actions?

Besides making it easier to quickly identify actions, it'll also act as a uniform guide that's easier to design around. I.e., components containing large amounts of actions are easy since they all have the same dimensions, etc.

I'll be iterating on this wireframe and adding new ones. I'm hoping to have time to implement some of them myself soon as well. But at the very least, these wireframes can serve as a reference. Very open to feedback on anything.

Since upgrading to 1.0, support for Immutable.js has stopped working. It shows the raw immutable object rather than converting it to JS.

There is some discussion of this in #48

Tests are needed badly. The setup is in place.
Mostly we want to test that ./src/devTools behaves as expected.

I'm lazy so I'd rather see an implementation of #8 first, and use that to generate some tests for devTools by inspecting devTools with devTools.

var _react = require('react'); is resolving to an empty module. I believed the solution was to add an alias to my webpack config:

  resolve: {
    alias: {
      react: path.join(__dirname, '../../node_modules', 'react'),
    },
    modulesDirectories: ['', 'src', 'node_modules'],
    extensions: ['', '.json', '.js', '.jsx', '.gss'],
  },

But the alias seems to royally screw dependency loading for every other module. The only way I've managed to get redux-devtools working is by manually resolving all the paths (var _react = require('../../../../react/react.js');) inside the redux-devtools source (horrible, temporary fix).

No matter how good UI for object treeview can be, I doubt it'll beat the native UI (and REPL!)
What if we just add a tiny "log" button to every state and action in devtools?
Then you can always dump it to the console when you feel like exploring it in detail.

Right now editing JSONTree stuff does not cause a proper hot reload.

Hi, I'm wondering if JSONTree can be its own npm package. I need a JSON viewer for my app, and I thought it'd be nice if I can use this.
https://github.com/gaearon/redux-devtools/blob/master/src/react/JSONTree/index.js

Of course I can just import redux-devtools/src/react/JSONTree but it'd be nicer if it's in own npm package. I can make a PR if that's ok.

For now, I think I'm going to use this:
https://github.com/Lapple/react-json-inspector

Hi,

I have certain actions that get dispatched in componentDidMount that I want to re-trigger after doing a reset or rollback. What's the easiest way to hook into the devtools to do this?

Thanks!

function deserializer(state) {
  console.log(state) // first one is undefined
  return state
}
persistState(sessionID, deserializer)

This causes some deserialization functions to not work unless it checks that state is defined

Hitting Ctrl+H hides the LogMonitor but not the DebugPanel - so you still see the box shadow and cannot click through.

https://github.com/gaearon/redux-devtools/blob/master/src/react/DebugPanel.js#L12
https://github.com/gaearon/redux-devtools/blob/master/src/react/LogMonitor.js#L115

Before Ctrl+H

<div style="position:fixed;z-index:10000;font-size:17px;overflow:hidden;opacity:1;color:white;right:0;top:0;bottom:0;max-height:100%;max-width:20%;min-width:300px;word-wrap:break-word;box-sizing:border-box;box-shadow:-2px 0 7px 0 rgba(0, 0, 0, 0.5);" data-reactid=".0.1">
<div ...>...stuff here...</div>
</div>

After Ctrl+H

<div style="position:fixed;z-index:10000;font-size:17px;overflow:hidden;opacity:1;color:white;right:0;top:0;bottom:0;max-height:100%;max-width:20%;min-width:300px;word-wrap:break-word;box-sizing:border-box;box-shadow:-2px 0 7px 0 rgba(0, 0, 0, 0.5);" data-reactid=".0.1">
<noscript data-reactid=".0.1.0"></noscript>
</div>

Fix

Removing min-width seems to fix it

I have certain actions which are generated very frequently. When the devTools middleware is applied, this makes things very slow and clutters the monitors with lots of data.

It would be great if there were a way to specify a filter for an action to be ignored by devtools.

Thanks!

Since the themes are from Base16, is there a way to use the light theme instead of the dark one ?

When using jspm / system.js with the Babel transpiler, I'm seeing the following error in the console

Uncaught (in promise) Error: XHR error loading http://localhost:3000/jspm_packages/npm/[email protected]/lib/react/themes/pop.js
    Error loading http://localhost:3000/jspm_packages/npm/[email protected]/lib/react/themes/pop.js as "./pop" from http://localhost:3000/jspm_packages/npm/[email protected]/lib/react/themes/index.js
    at r (http://localhost:3000/jspm_packages/system.js:4:10975)
    at XMLHttpRequest.o.onreadystatechange (http://localhost:3000/jspm_packages/system.js:4:11500)

If I comment that line out of react/themes/index.js, I (as might be expected) don't see that error anymore.

However, I do see this;

Uncaught (in promise) Error: Cannot read property 'hasOwnProperty' of undefined
    Error loading http://localhost:3000/index.js
    at Object.checkAndWarnForMutatedProps (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactElementValidator.js:157:27)
    at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactReconciler.js:13:31)
    at ReactCompositeComponentMixin.mountComponent (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactCompositeComponent.js:99:36)
    at ReactPerf.measure.wrapper [as mountComponent] (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactPerf.js:27:23)
    at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactReconciler.js:11:37)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactMultiChild.js:75:46)
    at ReactDOMComponent.Mixin._createContentMarkup (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactDOMComponent.js:146:34)
    at ReactDOMComponent.Mixin.mountComponent (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactDOMComponent.js:95:76)
    at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactReconciler.js:11:37)
    at ReactCompositeComponentMixin.mountComponent (http://localhost:3000/jspm_packages/npm/[email protected]/lib/ReactCompositeComponent.js:99:36)

This seems related to the DevTools.

Here's how I'm trying to use them;

import React, { PropTypes, Component } from 'react'
import { Redirect, Router, Route } from 'react-router'
import { Provider } from 'react-redux'
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import logger from './middleware/logger'
import persistenceStore from './persistence/store'
import { devTools } from 'redux-devtools'
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react.js'
import App from './containers/App'
import * as storage from './persistence/storage'
import * as components from './components/index'
import * as reducers from './reducers/index'
import * as constants from './constants'

const __DEVTOOLS__ = true

const {
  AccountsList,
  Dashboard,
  SideBar,
  TitleBar,
  Login
} = components

const initialState = {
  application: {
    token: storage.get('token'),
    user: { permissions: [] }
  }
}

let combinedCreateStore
const storeEnhancers = [persistenceStore]

if (__DEVTOOLS__) {
  storeEnhancers.push(devTools())
}

combinedCreateStore = compose(...storeEnhancers)(createStore)
const finalCreateStore = applyMiddleware(thunk, logger)(combinedCreateStore)
const combinedReducer = combineReducers(reducers)
const store = finalCreateStore(combinedReducer, initialState)

function getRootChildren (history) {
  const rootChildren = [
    <Provider key='provider' store={store}>
      {renderRoutes.bind(null, history)}
    </Provider>
  ]

  if (__DEVTOOLS__) {
    rootChildren.push((
      <DebugPanel key='debug-panel' top right bottom>
        <DevTools store={store} monitor={LogMonitor}/>
      </DebugPanel>
    ))
  }
  return rootChildren
}

export default class Root extends Component {

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render () {
    const { history } = this.props
    return (
      <div>{getRootChildren(history)}</div>
    )
  }
}

function renderRoutes (history) {
  return (
    <Router history={history}>
      <Route component={App}>
        <Route path='/' component={Dashboard} />
        <Route path='accounts' component={AccountsList} />
        <Route path='login' component={Login} />
        <Route path='logout' onEnter={logout} />
      </Route>
    </Router>
  )
}

function requireAuth (nextState, redirectTo) {
  const state = store.getState()
  const isLoggedIn = Boolean(state.application.token)
  if (!isLoggedIn) {
    redirectTo('/login', {
      nextPathname: nextState.location.pathname
    })
  }
}

function logout (nextState, redirectTo) {
  store.dispatch({ type: constants.LOG_OUT })
  redirectTo('/login')
}

And here's my package.json

{
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "standard"
  },
  "author": "",
  "license": "Apache-2",
  "jspm": {
    "directories": {
      "baseURL": "app"
    },
    "dependencies": {
      "classnames": "npm:classnames@^2.1.3",
      "history": "npm:history@^1.8.4",
      "react": "npm:react@^0.13.3",
      "react-pure-render": "npm:react-pure-render@^1.0.2",
      "react-redux": "npm:react-redux@^2.1.1",
      "react-router": "npm:[email protected]",
      "redux": "npm:redux@^2.0.0",
      "redux-devtools": "npm:redux-devtools@^2.1.0",
      "redux-thunk": "npm:redux-thunk@^0.1.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.22",
      "babel-runtime": "npm:babel-runtime@^5.8.20",
      "core-js": "npm:core-js@^1.1.0"
    }
  },
  "devDependencies": {
    "browser-sync": "^2.9.1",
    "foundation-apps": "^1.1.0",
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4",
    "redux": "^2.0.0",
    "redux-devtools": "^2.0.0",
    "rimraf": "^2.4.3",
    "standard": "^5.2.1",
    "vinyl": "^0.5.3"
  }
}

If I set __DEVTOOLS__ = false I don't see any errors and the app renders as expected.

I based my implementation on this webpack example which works just fine:
https://github.com/emmenko/redux-react-router-async-example

What am I doing wrong?

I also posted to StackOverflow

Hi gaearon and community, thanks for the fantastic tools!

I was wondering if there was any way to save/serialize redux actions that had been executed on the server so that they would appear in DevTools. At the moment, I have very similar code on server and client with both allowing a dispatch of a promise based action that updates the store in a standard redux way. Obviously, client side works flawlessly thanks to this wonderful code base, but at the moment, the server side actions don't appear even though they effect the initial state. It'd be neat to be able to see that these were the results of a GET_DATA server action, for instance, even if time-travel might or might not be possible. Any way this is already possible? Any thoughts on how I might lend a hand if not/ if it isn't fundamentally impossible?

@gaearon Not sure how is that possible since you have prepublish there, but it seems about it. Can somebody else confirm this please ?

One UseCase: After having called jumpToState a user might want to remove all actions following that state.

At the moment this would be pretty complicated for a Monitor. Either modifying stagedActions directly and calling jumpToState again to have recomputeStates run.
Or store the currently skipped Actions, reset the skipped actions and only skip the actions after the current action and then call sweep and then restore the remembered skipped ones... ;)

Also - not sure -, maybe there should be a recomputeStates action.

This way we can version them separately.

related to toggleAction #6

Video showing the problem:
https://youtu.be/JDC13K6-OX0

Check out Cerebral's slider UI. Maybe we could adapt it?

=)

Currently the debuggers show the action that was run with the arguments and the resulting state.
Is someone working on displaying information on how action (creators) triggered other actions, common with for example Async actions?
Another thing that might be interesting is showing the reducers that where executed (listening to that certain action).
Displaying what code is executed is one of the interesting aspects of Cerebral's debugger for example.

I'm rewriting disto to just use redux underneath, and have bumped into a problem with redux-devtools + hmr.

You can reproduce this by checking out this commit threepointone/disto@ff4bdd0 - then run npm install, and make hot. then open http://localhost:3000/examples/simple/index.html

The app itself is simple -

let stores = {
  counter(o = {count: 0}, action) {
    return (action.type === 'inc') ?  {count: o.count + 2} : o;
  }
}

let actions = {
  inc: () => ({type:'inc'})
};

export class App {
  render() {
    return <Flux stores={stores} actions={actions}>{
      ({counter}, $, store) =>
        <div onClick={$.inc}>
          clicked {counter.count} times
        {/*
          <DebugPanel top right bottom>
            <DevTools store={store} monitor={LogMonitor} />
          </DebugPanel>
        */}
        </div>
    }</Flux>;
  }
}

To be specific, I've setup my store as so -

compose(
      applyMiddleware(thunk),
      devTools(),
      persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
      createStore
    )(combineReducers(stores))

problem 1: when my code hot loads, it replays all actions with new store logic. however, if I comment out devTools and persistState, it maintains my previous state, and only applies new store logic to new actions. which one is expected?

problem 2: when I enable the dev panel (commented out in examples/simple/app.js, then I get a Maximum call stack size exceeded error.

Cheers,
π

Is there any way to hide the LogMonitor by default on React? I see it has an isVisible property but as the LogMonitor is injected into DevTools component I'm not sure about how to pass it

When I use persistState and with a debug session and immutable data I get the error below when I reload the page after committing:

Uncaught TypeError: campaign.toObject is not a function

My state is an immutable record.

const table = Record({
  rows: List([]),
  sortBy: 'name',
  isAsc: false,
  mode: ACTIVE
});

Are there any hooks I can use to turn persisted state back into an immutable record

A checklist for tracking/finishing styling.

• box-shadow still visible after hiding devtools
• in hidden state, DebugPanel is still visible (#54)
• add hover state on LogMonitorEntryAction title
• add vertical margin on deeply nested values
• change error color to red (#59)
• does action section need more callout?
• animate appending items (@threepointone?)
• key may be difficult to expand (I noticed the actions block has an odd conflict with the mouse)

Problem

When trying to replace the reducer, the dev-tools throw this error:
Uncaught TypeError: Cannot read property 'undefined' of undefined

`Uncaught TypeError: Cannot read property 'undefined' of undefined
unliftState @   devTools.js:189
getState    @   devTools.js:205
selectState @   createConnector.js:89
handleChange    @   createConnector.js:82
(anonymous function)    @   Store.js:53
dispatch    @   Store.js:52
replaceReducer  @   Store.js:43
(anonymous function)    @   App.js:46

Reproduction steps

I've used the counter example to verify the behavior. Modifying containers/App.js by adding the following lines after const store = finalCreateStore(reducer);

// ..example code
const reducer = combineReducers(reducers);
const store = finalCreateStore(reducer);

// code for error reproduction
setTimeout(function () {
  console.log('replacing reducer')
  store.replaceReducer(reducer)
}, 5000)

// example code continues..
export default class App extends Component { // ..

Then just run the example code and wait for 5 seconds. The error appears in the browser console.
Error appears without setTimeout, too. I just used it to simulate code loaded later on.

Question

Am I trying to do something that is not allowed or is this a legitimate bug?
The reason I am attempting to do this is because I am trying to make code splitting work.

Seems devtools is triggering every action multiple times, have a look at the sample code here.

After starting the app, click "Add to cart" on "H&M T-Shirt White - 10.99" twice, and notice the 2nd time there are 2 items instead of 1 added to the cart, then click the button again, this time 3 items will be added.

I've traced it down to that devtools is triggering the action (ADD_TO_CART) multiple times, once devtools is disabled the issue is gone.

I'm wondering is this a bug in devtool or am I using it wrong? Thanks.

NOTE Also on react-redux repo

I have executed ncu -u to upgrade my package dependencies, to have the settlement like described below:

Previous versions:

{
  "react-redux": "^0.2.2",
  "redux-devtools": "^0.1.2"
}

New versions:

{
  "react-redux": "^2.1.0",
  "redux-devtools": "^2.1.0"
}

And after installing newer package versions, saw an error displayed on console:

createConnect.js?70ef:76 Uncaught TypeError: store.getState is not a function

After searching for a while, I realised, by debugging the injected code by webpack, it had to do with the devtools.

Here the following code snippet:

import { devTools, persistState } from 'redux-devtools';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
/*** some other things ***/

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

/*** some other things ***/

<div className={nameBuilder(componentName, 'content')}>
  <Provider store={store}>
    {() => <Routing {...{history}}/> }
  </Provider>
  <DebugPanel top right bottom>
    <DevTools store={store} monitor={LogMonitor}/>
  </DebugPanel>
</div>

If I comment out exactly the imports as well as the devTools(), persistState(...),as well as the <DebugPanel>...</DebugPanel>, simply works.

The reason why isn't working. I don't know. I'm quite new on these technologies and haven't follow issues' discussions you have had around.

I can state then that by using the latest versions of react-redux together with the DebugPanel of redux-devtools, the application crashes not bootstrapping properly.

Hope it helps to figure out.

First reported by @bkniffler here and by @josebalius here. Just hit this issue, too.

The error happens on this line when clicking a state object node in the devtools to expand it.

I really want to see a custom monitor (#3) that lets you record a session and then export it as a unit test where each intermediate state + action => state combination is written as an assertion.

With https://github.com/calesce/redux-slider-monitor and https://github.com/lapanoid/redux-devtools-gentest-plugin I think it's evident that monitors can do more than one thing.

In fact the current monitor does too many things. It wastes the precious screen estate on JSON state which is hardly readable. What if there was a separate CurrentStateMonitor that only displays the current state in full height, with a proper tree view? Then we could change the default monitor to only show the path chosen in the CurrentStateMonitor.

But then you'd need to find an easy way to keep multiple monitors visible. Wouldn't it be cool if there was a "monitor manager" that's also a monitor by itself, but renders a box like

 ________________________
| [show actions]        |
| [show current state]  |
| [show test generator] |
| [show slider]         |
| [show custom monitor  ]
_________________________

When a button is pressed, it would render those monitor floated left next to it. You can view actions + current state, or actions + test generator, or current state + slider, or any other combination.

API would be like this:

<DevTools store={store}
                    monitor={CompositeMonitor}
                    monitors={{
                       'show actions': LogMonitor,
                       'show current state': CurrentStateMonitor,
                       'show test generator': TestGeneratorMonitor,
                       'show slider': SliderMonitor,
                       'show custom monitor': MyCustomMonitor
                    }} />

Of course you are free to only use two, or three, or any count of any monitors you like. The main goal here is to make some official way to mix them and on the other hand make it easy to show/hide individual monitors so they don't waste screen space when you don't need them.

Thoughts? This should be doable in userland right now. The “visible monitors” thing could be kept in monitorState by the CompositeMonitor.

In 1.0, if you toggle it closed (using ctrl-h), the box shadow from the DebugPanel component is still visible.

If I import redux-devtools/lib/react in a project, even if it's not used, hot-reloading no longer works. It happens for all files, and I've entirely disabled the DevTool component as well as the devTool middleware, so the only reference to redux-devtools is an unused import. I'll try to gather more information, but here's the warning from Webpack:

[HMR] Cannot apply update. Need to do a full reload!
dev-server.js:19 [HMR] Error: Aborted because 198 is not accepted
    at hotApply (http://localhost:3000/vendor.1147cd2c761079891a5b.js?1147cd2c761079891a5b:400:31)
    at hotUpdateDownloaded (http://localhost:3000/vendor.1147cd2c761079891a5b.js?1147cd2c761079891a5b:313:13)
    at hotAddUpdateChunk (http://localhost:3000/vendor.1147cd2c761079891a5b.js?1147cd2c761079891a5b:293:13)
    at webpackHotUpdateCallback (http://localhost:3000/vendor.1147cd2c761079891a5b.js?1147cd2c761079891a5b:49:12)
    at http://localhost:3000/1.1147cd2c761079891a5b.hot-update.js:1:1

where 198 is [198] ./~/react-redux/lib/index.js 556 bytes. Maybe I'm just doing something weird that's causing this issue, so I'll try to isolate it to as small of an example as possible, but hot-reloading completely works until I add the import statement. Package versions are as follows:

    "react-redux": "^0.8.0",
    "redux": "^1.0.0",
    "react-hot-loader": "^1.2.8",
    "redux-devtools": "^1.0.0",

Any help is appreciated, even if you could just point me in the right direction. Thanks!

I searched a little and just discovered that Chrome always return false to event.ctrlKey and other keys (e.g. event.shiftKey) on keypress.

So, the hide function doesn't work on Chrome + Linux (34+ as far as I know).

I wanted to ask, what's the reason that you decided to make clicking an action toggle the action, rather than rewind time to that action as it was when you first demoed the early version of the devtools. It seems like this version is more fragile.

For example, if we look at the counter example from this repository. If we first take the following sequence of actions:

Increment, Increment, Decrement, Increment if Odd, Increment if Odd, Increment
(Increment, Increment, Decrement, Increment, , Increment)

We end up at 3. If we now toggle the second increment action, we end up at
(Increment, Increment, Decrement, Increment, , Increment)

This gives us a total of 2. However, if we try and replay the sequence of actions, we would get

Increment, Increment, Decrement, Increment if Odd, Increment if Odd, Increment
(Increment, Increment, Decrement, , , Increment)

Giving us 1.

This desync doesn't occur if we simply rewind time to any point, because we can't obtain an invalid history by going to a previous point in time.

Could we get back the functionality from the first demo, where toggling rewound time?

devtools causes a bunch of warnings:

Warning: Failed propType: Invalid prop childrensupplied toProvider, expected a single ReactElement. Check the render method of DevToolsWrapper.

With React 0.14 and later versions, you no longer need to wrap <Provider> child into a function.

Warning: require("react").findDOMNodeis deprecated. Please userequire("react-dom").findDOMNode instead.

I think the first ones are just adjustments to the 1.0 release of react-redux.

for the last one it would be nice if devtools could have support for both react 0.13 and 0.14, is that doable and desirable?

You several times said that devtools are currently ugly in terms of design.
It would be way much faster fixed if styling of devtools would be ovewritable. When it's inline noone can do anything about it. If styles would be separated to a css file and be combined inside several classNames - it would be easy to anyone overwrite this styles and soon someone can start thinking of a pull request.

Hi, todomvc and counter examples are not working for me. I am getting:

ERROR in /Users/jhonny/dev/redux-devtools/src/createDevTools.js
Module not found: Error: Cannot resolve module 'react-redux/lib/components/createAll' in /Users/jhonny/dev/redux-devtools/src
 @ /Users/jhonny/dev/redux-devtools/src/createDevTools.js 19:40-87