After initial load every action seems to crash DevTools

I’m loading the devtools like this:

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));

Reducer:

export default function(state = INITIAL_STATE, action = {}) {
  switch(action.type) {
  case POPULATE_TABLE:
    return { ...state, rows: action.payload.data };
  case 'UPDATE_PAGE':
    return { ...state, page: action.payload };
  default:
    return state;
  }
}

Actions

export function fetchRows(page = 1) {
  const url = `${rootUrl}/records`;
  const request = axios.get(url);
  return function(dispatch) {
    dispatch(updatePage(page));
    return request.then((data) => {
      dispatch({
        type: POPULATE_TABLE,
        payload: data
      });
    }, (error) => {
      console.error(error);
    });
  };
}

export function updatePage(page) {
  return {
    type: 'UPDATE_PAGE',
    payload: page
  };
}

Using Chrome 65, High Sierra, React 16.3, Redux 3.7

Any help appreciated!

[miachenmtl]

I’m experiencing the same problem, but I think I see something wrong with your createStore call. I believe instead of

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

it should be

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(
  applyMiddleware(ReduxPromise, ReduxThunk)));

My configuration is this, though, and I don’t see what’s wrong with it:

const configureStore = (middleware) => {
  const store = createStore(
    reducer,
    composeWithDevTools(applyMiddleware(middleware))
  );
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./src/store/reducer', () => {
      const nextRootReducer = require('./src/store/reducer').default; // eslint-disable-line global-require
      store.replaceReducer(nextRootReducer);
    });
  }
  return store;
};

const sagaMiddleware = createSagaMiddleware();

const store = configureStore(sagaMiddleware);

This seems to be only a problem with Chromium. In Firefox it works okay.

[zalmoxisus]

@RossKinsella I published a build, which removes some recent changes, in #619. Let’s move the discussion there.