redux devtools?

[chasm]

Can't seem to get Chrome's redux devtools extension to work with this. Ideas?

I get this error in the console: t.apply is not a function

[makstr]

@chasm: can you share your integration so we can take a look?

[makstr]

This is a working DevTools integration, I have not tried the chrome extension, but I my understanding is that it should be analogical

app/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import configureStore from './redux/store/configureStore';
import routes from './routes';
import DevTools from './utils/DevTools.js';

if (__CLIENT__ && __DEVELOPMENT__) {
  // https://facebook.github.io/react/docs/advanced-performance.html
  window.Perf = require('react-addons-perf');
}

let initialState;
try {
  initialState = window.__INITIAL_STATE__; // for erver-side-rendering
} catch (err) {
  initialState = {};
}

export const history = browserHistory;

export const store = configureStore(initialState);

if (__CLIENT__) {
  ReactDOM.render(
    <Provider store={store}>
      <div>
        <Router history={history}>
          {routes}
        </Router>
        {__DEVELOPMENT__ && <DevTools />}
      </div>
    </Provider>,
    document.getElementById('root')
  );
}

app/redux/store/configureStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { batchedSubscribe } from 'redux-batched-subscribe';
import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
import createLogger from 'redux-logger';
import rootReducer from '../';
import { promiseMiddleware } from '../middleware/promise';
import { apiMiddleware } from '../middleware/api';
import DevTools from 'utils/DevTools.js';

const __PRODUCTION__ = __PRODUCTION__ || process.env.NODE_ENV === 'production'; // eslint-disable-line

const logger = createLogger({
  collapsed: true,
  predicate: () =>
    process.env.NODE_ENV === 'development',
});

const middlewares = [
  apiMiddleware,
  promiseMiddleware(),
  thunkMiddleware,
  !__PRODUCTION__ && __CLIENT__ && logger,
].filter(Boolean);

const createStoreWithMiddleware = applyMiddleware(
  ...middlewares,
)(createStore);

export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState, compose(
    batchedSubscribe(batchedUpdates),
    DevTools.instrument()
  ));

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

  return store;
}

[Muscot]

Just another solution to get Redux DevTool to work:

import { createStore, compose, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from '../';
import { promiseMiddleware } from '../middleware/promise';
import { apiMiddleware } from '../middleware/api';

const __PRODUCTION__ = __PRODUCTION__ || process.env.NODE_ENV === 'production'; // eslint-disable-line

const logger = createLogger({
  collapsed: true,
  predicate: () =>
    process.env.NODE_ENV === 'development',
});

const middlewares = [
  apiMiddleware,
  promiseMiddleware(),
  thunkMiddleware,
  !__PRODUCTION__ && __CLIENT__ && logger,
].filter(Boolean);

export default function configureStore(initialState) {

  const store = createStore(rootReducer, initialState, compose(
    applyMiddleware(...middlewares),
    typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
  ));

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

  return store;
}