Redux chrome devtools crashing if bound action creator is not wrapped in another function

I came across a strange issue while dispatching actions that have no payload when I have the chrome devtools enabled.

The below code won’t work with devtools-enabled in the store:

Store creation

import { createStore, combineReducers } from 'redux';
import dummyReducer from '../ducks/dummy';

const reducers = combineReducers({
  dummy: dummyReducer,
});

const store = createStore(
  reducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

Dummy duck

import { createAction, handleActions } from 'redux-actions';

// Actions
const DUMMY_TOGGLE = 'glen-checkout/DUMMY_TOGGLE';

// Reducer
const initalState = {
  isDummy: false,
};

export default handleActions({
  [DUMMY_TOGGLE]: state => ({ isDummy: !state.isDummy }),
}, initalState);

// Action Creators
export const toggleDummy = createAction(DUMMY_TOGGLE);

Dummy Connected component

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { toggleDummy } from '../ducks/dummy';

const DummyComp = ({ isDummy, onToggleDummy }) => (
  <div style={{ marginTop: 30 }}>
    <button style={{ marginRight: 30 }} onClick={onToggleDummy}>Toggle</button>
    <span>{isDummy ? 'Oh ma\'h, I am a dummy component! 🐗 ' : 'I am a clever component 🤓 '}</span>
  </div>
);

DummyComp.propTypes = {
  isDummy: PropTypes.bool.isRequired,
  onToggleDummy: PropTypes.func.isRequired,
};

export default connect(
  state => ({
    isDummy: state.dummy.isDummy,
  }),
  {
    onToggleDummy: toggleDummy,
  }
)(DummyComp);

This component won’t be able to dispatch an action if I set onClick={onToggleDummy}. The console reports the below error when I click on the toggle button:

However if I disable devtools in the store, everything works fine.

That problem can be worked around by wrapping the onClick handler in a extra function: onClick={() => onToggleDummy()}

Any ideas why this could be happening?

[zalmoxisus]

I don’t seem to reproduce the issue with failing to access toISOString.

However, accessing the synthetic event will still not be possible as described in #275. As we are not allowed to access the object properties without throwing an Error by React (in dev mode only), we cannot detect if this object is an event. So, the only solution to prevent this, would be to check if it’s an instance of SyntheticEvent like so:

import SyntheticEvent from 'react/lib/SyntheticEvent';
// ...

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  serialize: {
    replacer: (key, value) => {
      if (value && value instanceof SyntheticEvent) return '[Event]';
      return value;
    }
  }
}));

Let me know if this approach works for you.

[joetidee]

Ok, just read up on this and the SyntheticEvent solution can no longer be used. Try this instead:

https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#it-fails-to-serialize-data-when-passing-synthetic-events-or-calling-an-action-directly-with-redux-actions