Простой пример использования effector-logger & effector-inspector без babel-plugin

app.tsx

import React from 'react';
import { useEvent, useStore } from 'effector-react';
import { $counter, dec, inc, reset } from './counter';

export const App = () => {
  const counter = useStore($counter);
  const api = useEvent({ inc, dec, reset });

  return (
    <div>
      <h1>{counter}</h1>

      <div>
        <button onClick={() => api.dec()}> -</button>
        <button onClick={() => api.inc()}> +</button>
        <button onClick={() => api.reset()}>reset</button>
      </div>
    </div>
  );
};

counter.ts

import { domain } from './domain';

export const $counter = domain.createStore<number>(0, { name: 'counter' });

export const inc = domain.createEvent('inc');
export const dec = domain.createEvent('dec');
export const reset = domain.createEvent('reset');

$counter
  .on(inc, state => state + 1)
  .on(dec, state => state - 1)
  .reset(reset);

domain.ts

// @ts-ignore
import { attachLogger } from 'effector-logger/attach';
import { createDomain } from 'effector';

export const domain = createDomain();

attachLogger(domain, {
  reduxDevtools: 'enabled',
  console: 'enabled',
  inspector: 'enabled',
});

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { createInspector } from 'effector-inspector';
import { App } from './app';

createInspector();

ReactDOM.render(
  <App />,
  document.getElementById('root'),
);