[Discussion] Gatsby Devtools

Summary

There is a redux devtools section in the docs and some old issues. But i believe the docs are outdated and also those are for working within the Gatsby repo itself, not with a Gatsby site, because gatsby sites do not have access to remotedev. (please correct me if this is wrong - i tried to simply install remotedev in my app (as well as globally) and it didnt work)

Anyway, this seems like a strange limitation. Why shouldn’t Gatsby apps have the same tooling? this doesnt have to be limited to hooking into redux devtools, although we do get those for “free”.

Idea list

• CLI to launch remotedev to see redux updates in browser
• see socket.io messages
• “–verbose” mode to log out all the lifecycles called by each plugin in sequence (honestly not sure if this is covered by redux but we can probably do some custom reporting)
• ???

[tomVlt]

Not sure it achieves your Idea List but if someone wants to see redux updates in browse, there is simple pattern. You will have data visualisation such as reducers structure, action dispatch, stop and replay updated in real time… It works well in my own V2 boilerplate :

First Step

• Head here to grab setup config for Redux with Gatsby ssr (updated for V2) https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux

Second Step

• Next head here and download the Redux DevTools Extension for your web browser https://github.com/zalmoxisus/redux-devtools-extension

Last Step

• In your createStore config pass a compose callback with the devtools config as last argument you can see my own config as an example. Yours might be different depending on your needs.

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initStore = () => {
  const windowGlobal = typeof window !== 'undefined' && window

  const devtools =
  process.env.NODE_ENV === 'development' && windowGlobal.devToolsExtension
    ? window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__()
    : f => f;

  const store = createStore(
    rootReducer,
    compose(
      applyMiddleware(thunk),
      devtools,
    )
  );

  return store;
};

export default initStore;

[tomVlt]

Not now due to V2 migration and that’s pretty understandable…

But I’m pretty sure Gatsby community will come up in a couple of month to develop “an out of the box” solution. They’ve already commit a V2 starter with Dan Abramov’s Devtool version and emotion ssr together !

Meanwhile Redux-devtools-extension, as I explained above, achieves pretty much everything your are looking for, it’s just an alternative to redux-remotedev which is way more stable and maintained by the way (7000+ stars, 47 contributors on github).

Since I exposed a V2 implementation you should definitely give it a try 😃 Cheers