Redux dev tools

https://github.com/peter-mouland/react-lego/compare/redux...redux-devtools

This adds the ability debug your react-redux app without having to keep adding logging statements. This is a really handy tool as it is very quick to see the full state of your app which really helps to see when changes happen and the affects they have.

Does it work in universal apps?

Yes. But we can't try to render this on the server, we only want the dev-tools on the client and while we are in dev/debug (not production) mode. To make sure that our server-side rendered app doesn't throw the following error on the client we have to get sneaky with React.

React attempted to reuse markup in a container but the checksum was invalid

Sneaky with React?

We must provide another container and another renderer for the dev-tools, so they are separate from our main app.

// client-render.js
import Root, { DevTools } from './Root';
ReactDOM.render(<Root />, document.getElementById('html'));
ReactDOM.render(<DevTools />, document.getElementById('devTools'));

This way, the client will render the dev-tools and the server never knows it's there. However, we do have to share the same instance of our store between the two apps to ensure they are in sync.

We can do this by creating and wrapping our dev-tools with a Redux 'provider' when we create out root App. This way we ensure that both apps (dev-tools and our actual app) both use the same Store.

// Root.js
const RootEnv = (process.env.NODE_ENV !== 'production')
  ? require('./containers/DevTools/DevTools')
  : () => (<span />);

export const DevTools = () => (<Provider store={store} ><RootEnv /></Provider>);
export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Router history={reduxHistory} routes={makeRoutes()} />
      </Provider>
    );
  }
}

For full code changes required to make to your Redux app, take a look here: https://github.com/peter-mouland/react-lego/compare/redux...redux-devtools