Devtools

By adding the DevtoolsProvider to your the application you will get insight into the history of state changes, dispatches, side effects and also look at the definition of your transitions right from within your app.

The Devtool automatically handles server side rendering.

import * as React from 'react';
import { render } from 'react-dom';
import { DevtoolsProvider } from 'react-states/devtools';
import { App } from './App';

const rootElement = document.getElementById('root');

render(
  <DevtoolsProvider>
    <App />
  </DevtoolsProvider>,
  rootElement,
);

import { createReducer } from 'react-states'
import { useDevtools } from 'react-states/devtools';

const reducer = createReducer({});

const SomeComponent = () => {
  const someReducer = useReducer(reducer);

  useDevtools('my-thing', someReducer);
};