content: import React, { Component } from 'react';
  
  const withDevTools = (
    // process.env.NODE_ENV === 'development' &&
    typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
  );
  
  class Counter extends Component {
    constructor() {
      super();
      this.state = { counter: 0 };
      
      this.increment = this.increment.bind(this);
      this.decrement = this.decrement.bind(this);
    }
  
    componentWillMount() {
      if (withDevTools) {
        this.devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect();
        this.unsubscribe = this.devTools.subscribe((message) => {
          // Implement monitors actions.
          // For example time traveling:
          if (message.type === 'DISPATCH' && message.payload.type === 'JUMP_TO_STATE') {
            this.setState(message.state);
          }
        });
      }
    }
  
    componentWillUnmount() {
      if (withDevTools) {
        this.unsubscribe(); // Use if you have other subscribers from other components.
        window.__REDUX_DEVTOOLS_EXTENSION__.disconnect(); // If there aren't other subscribers.
      }
    }
  
    increment() {
      const state = { counter: this.state.counter + 1 };
      if (withDevTools) this.devTools.send('increment', state);
      this.setState(state);
    }
  
    decrement() {
      const state = { counter: this.state.counter - 1 };
      if (withDevTools) this.devTools.send('decrement', state);
      this.setState(state);
    }
  
    render() {
      const { counter } = this.state;
      return (
        <p>
          Clicked: {counter} times
          {' '}
          <button onClick={this.increment}>+</button>
          {' '}
          <button onClick={this.decrement}>-</button>
        </p>
      );
    }
  }
  
  export default Counter;
  